使用vue-router的meta实现 设置每个页面的title标题

1.实现效果（左上角title变化）

2.核心代码：

1.这里主要是 meta 属性下面设置一个自定义的键值 title
2.在前置导航守卫里面如下：

router.beforeEach((to,from,next)=>{
  // 根据路由元信息设置文档标题
  window.document.title = to.meta.title || admin
  next()
})

  

 

  
1
  
2
  
3
  
4
  
5
 

3.完整的路由代码

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// 定义路由规则
export const routes = [
{
    path: '/sys',
    component: => import('@/views/layout/Layout'),
    meta: { title: '系统管理'},
    children: [
      {
        path: '/',
        redirect: '/home',
        component:  => import('@/views/sys/home/index'),
        meta: { title: '后台主页' }
      },
      {
        path: 'role',
        component: () => import('@/views/sys/role/index'),
        meta: { title: '角色管理' },
      },
      {
        path: 'tree',
        component: () => import('@/views/sys/tree/index'),
        meta: { title: '树状菜单' }
      },
      {
        path: 'department',
        component: () => import('@/views/sys/department/index'),
        meta: { title: '部门管理'}
      }
    ]
  },
]


const router = new Router({
  routes
})

// 路由前置导航守卫
router.beforeEach((to,from,next)=>{
  // 根据路由元信息设置文档标题
  window.document.title = to.meta.title || admin
  next()
})

export default router;

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/108353272