通常默认情况下,vue-cli脚手架自动生成的项目中,页面title取的是package.json
中的name
值:
如果我们的项目只是一个单页面,那么直接修改这个值就好
但是!!!
如果我们的项目是一个由vue-router模拟的多页面项目,每个页面都需要设置自己不同的title
时,该怎么办呢?
这时候,我们就要拿出路由中的导航卫士功能:
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB
我们可以使用 router.beforeEach
注册一个全局前置守卫:
再在路由配置中设置每个路由的title值:
这样当访问所有路由时,会先判断前置守卫中的
title
值,若存在,则把默认title
修改成路由中设置的值但是!!!
发现如果网路慢,会导致
package.json
中设置的name
一闪而过,强迫症绝对不能忍,可以加一个else
判断:然后将
index.html
中title标签删除就好:这样当访问路由,如果路由有设置title
,则显示其值,否则显示else
中设置的默认值,就酱!