使用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

NAT Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。