快捷導(dǎo)航

Vue如何根據(jù)不同的路由設(shè)置不同的title標(biāo)題

更新時間：2026年04月14日 09:24:45 作者：Sunshine_Jian

本文主要介紹了如何在Vue路由中添加meta屬性,并以及使用router.beforeEach編寫路由前置守衛(wèi),以實現(xiàn)在路由跳轉(zhuǎn)前的一些操作,并詳細(xì)地給出了代碼示例

第一步

在router>index.js文件中編寫路由規(guī)則，并增加meta屬性；

{
    path:'/billSystem',
    name:'bill_system',
    component:() => import('../views/bill_system/index.vue'),
    meta:{
        title:'賬單管理',
        keepAlive:false
    }
},

第二步

在路由規(guī)則下方，增加路由前置守衛(wèi)，router.beforeEach

to：即將進(jìn)入的路由信息對象（去哪里）
from：離開的路由信息對象（從哪里來）
next()：放行（當(dāng)前路由繼續(xù)執(zhí)行）

//路由前置守衛(wèi)；用來設(shè)置元信息
router.beforeEach((to,from,next)=>{
  if(to.meta.title){
    document.title=to.meta.title
  }
  next()
})

效果

最后：呈上所有代碼

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    redirect:'/dashBoard',
    component: () => import('../views/Home.vue'),
    children:[
      {
        path:'/dashBoard',
        name:'dash_board',
        component:() => import('../views/dash_board/index.vue'),
        meta:{
          title:'首頁',//配置title
          keepAlive:false,//是否緩存
          requireAuth:false//是否需要身份驗證
        }
      },
      {
        path:'/accountInfo',
        name:'account_info',
        component:() => import('../views/account_info/index.vue'),
        meta:{
          title:'賬戶信息',
          keepAlive:false,
          requireAuth:false
        }
      },
      {
        path:'/billSystem',
        name:'bill_system',
        component:() => import('../views/bill_system/index.vue'),
        meta:{
          title:'賬單管理',
          keepAlive:false,
          requireAuth:false
        }
      },
      {
        path:'/applicationInfo',
        name:'application_info',
        component:() => import('../views/application_info/index.vue'),
        meta:{
          title:'應(yīng)用數(shù)據(jù)',
          keepAlive:false,
          requireAuth:false
        }
      },
      {
        path:'/userSystem',
        name:'user_system',
        component:() => import('../views/user_system/index.vue'),
        meta:{
          title:'用戶管理',
          keepAlive:false,
          requireAuth:false
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})
//路由前置守衛(wèi)；用來設(shè)置元信息
router.beforeEach((to,from,next)=>{
  if(to.meta.title){
    document.title=to.meta.title
  }
  next()
})

export default router