Vue不同頁(yè)面展示不同的title實(shí)現(xiàn)方式
更新時(shí)間：2025年10月27日 09:07:41 作者：馬?騰
文章介紹了如何在`router.js`文件中設(shè)置路由、添加自定義的`meta`屬性來(lái)定義當(dāng)前視圖的標(biāo)題,并在路由導(dǎo)航守衛(wèi)中進(jìn)行相應(yīng)的處理,最后通過(guò)查看效果來(lái)驗(yàn)證實(shí)現(xiàn)
Vue不同頁(yè)面展示不同的title
1.在router.js文件中
設(shè)置 routes: [] 添假meta屬性 自定義當(dāng)前試圖的title
{
path: '/login',
component: Login,
meta: { title: '登錄系統(tǒng)' }
}2.在router.js文件中設(shè)置
路由導(dǎo)航守衛(wèi)中
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})3.完成，看效果
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 判斷元素內(nèi)容是否超過(guò)寬度的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
下面小編就為大家分享一篇axios攔截設(shè)置和錯(cuò)誤處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue對(duì)Element中的el-tag添加@click事件無(wú)效的解決
本文主要介紹了Vue對(duì)Element中的el-tag添加@click事件無(wú)效的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue.js動(dòng)態(tài)設(shè)置VueComponent高度遇到的問(wèn)題及解決
這篇文章主要介紹了vue.js動(dòng)態(tài)設(shè)置VueComponent高度遇到的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
HTML頁(yè)面中使用Vue示例進(jìn)階（快速學(xué)會(huì)上手Vue）
Vue是用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶(hù)界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。VUE有兩種使用方式，一種實(shí)在html中直接使用vue做開(kāi)發(fā)，一種是企業(yè)級(jí)的單頁(yè)面應(yīng)用。2023-02-02
Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例
這篇文章主要介紹了Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式
這篇文章主要介紹了vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)
這篇文章主要介紹了vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vue項(xiàng)目實(shí)現(xiàn)記住密碼到cookie功能示例(附源碼)
本篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)記住密碼到cookie功能示例(附源碼)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
vue實(shí)現(xiàn)商品購(gòu)物車(chē)全選反選
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品購(gòu)物車(chē)全選反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04