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标题》对你有帮助,请点赞、收藏,并留下你的观点哦!