路由导航守卫document.title = to.meta.title的作用以和路由跳转修改页面title

目录

🔽 document.title = to.meta.title的作用

🔽 Vue路由跳转时如何更改页面title

🔽 document.title = to.meta.title的作用

路由导航守卫如下：

1.  
   router.beforeEach(async (to, from, next) => {
2.  
   document.title = to.meta.title; // 路由发生变化时候修改页面中的title
3.  
   const hasToken = store.getters.token;
4.  
   if (hasToken) {
5.  
   next();
6.  
   } else {
7.  
   if (whiteList.indexOf(to.path) !== -1) {
8.  
   next();
9.  
   } else {
10.  
    next(`/login`);
11.  
    }
12.  
    }
13.  
    });

1、当没有document.title = to.meta.title，页面发生跳转时，效果如下:

即不管怎么切换，title标签中的值总是为app-vue

2、当有document.title = to.meta.title，页面发生跳转时，效果如下:

即title标签内包含当前页面的meta.title的值

🔽 Vue路由跳转时如何更改页面title

1、router文件夹下的index.js文件中给每个path添加meta:{}

1.  
   export default new Router({
2.  
   routes: [
3.  
   {
4.  
   path: "/",
5.  
   name: "index",
6.  
   component: index,
7.  
   meta: {
8.  
   title: "title1",
9.  
   },
10.  
    },
11.  
    {
12.  
    path: "/studentInfo",
13.  
    name: "studentInfo",
14.  
    component: studentInfo,
15.  
    meta: {
16.  
    title: "title2",
17.  
    },
18.  
    },
19.  
    ],
20.  
    });

2、在js入口文件main.js中添加代码

1.  
   router.beforeEach((to, from, next) => {
2.  
     /* 路由发生变化修改页面title */
3.  
     if (to.meta.title) {
4.  
         document.title = to.meta.title
5.  
     }
6.  
     next()
7.  
   })

效果：

参考：Vue如何动态修改meta的title

这篇好文章是转载于：学新通技术网