使用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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。