Vue-根据不同的路由-设置不同的title标题

最新推荐文章于 2024-08-07 10:25:36 发布

Sunshine_Jian

最新推荐文章于 2024-08-07 10:25:36 发布

阅读量2.7k

点赞数 2

分类专栏： Vue2 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Sunshine_Jian/article/details/122210709

版权

Vue2 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue.js应用中使用router配置文件设置路由的meta属性，以便自定义页面标题，并通过路由前置守卫更新文档标题。涵盖了路由规则的编写和路由守卫的实现，适合初学者了解Vue Router的基本用法。

摘要由CSDN通过智能技术生成

第一步：在router>index.js文件中编写路由规则，并增加meta属性；
{
    path:'/billSystem',
    name:'bill_system',
    component:() => import('../views/bill_system/index.vue'),
    meta:{
        title:'账单管理',
        keepAlive:false
    }
},

第二步：在路由规则下方，增加路由前置守卫，router.beforeEach

to：即将进入的路由信息对象（去哪里）

from：离开的路由信息对象（从哪里来）

next(): 放行（当前路由继续执行）
//路由前置守卫；用来设置元信息
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:'应用数据',
          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
})
//路由前置守卫；用来设置元信息
router.beforeEach((to,from,next)=>{
  if(to.meta.title){
    document.title=to.meta.title
  }
  next()
})

export default router