1.實現效果（左上角title變化）

2.核心代碼：

1.這里主要是 meta 屬性下面設置一個自定義的鍵值 title
2.在前置導航守衛里面如下：

router.beforeEach((to,from,next)=>{// 根據路由元信息設置文檔標題window.document.title = to.meta.title || adminnext() })

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 || adminnext() })export default router;

總結

以上是生活随笔為你收集整理的使用vue-router的meta实现 设置每个页面的title标题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。