由于vue项目通常是单页应用，因此在入口文件只有一个title，单页所展示的若干页面只是随着路由的切换而在同一个上不同的渲染而已，因此此时的title属性是不会随着页面的切换而变更的
那么想实现路由切换title变换可以通过vue-router的导航守卫来实现，最简单的的目录结构可如下所示
├── ├── main.js ├── api │ └── ... # 抽取出api请求 ├── common │ └── constants.js //title值 ├── components │ ├── helloworld.vue │ ├── test.vue │ ├── user.vue │ └── ... ├── router │ └── index.js
下面主要就是vue-router的内容了，其他页面级别的内容无关紧要
router/index.js内容如下：
我要评论
import vue from 'vue'
import router from 'vue-router'
import constants from '../common/constants'
vue.use(router)
const router = new router({
routes: [{
path: '/',
name: 'helloworld',
component: reslove => require(['../components/helloworld'], reslove)
},{
path: '/hello',
name: 'hello',
props: {name: 'garrett'},
component: reslove => require(['../components/test'], reslove)
},{
path: '/user',
name: 'user',
component: reslove => require(['../components/user'], reslove)
},{
path: '*',
redirect: {name: 'hello'}
}]
})
//导航后置守卫，可以在确定导航到目标页面时再更改title
router.aftereach((to, from) => {
window.document.title = constants[to.name];
})
export default router;
在这里使用全局后置守卫来对路由切换进行统一操作，全局前置守卫在正常情况下也可以，但是如果出现导航一半终止掉，会出现页面没有被渲染为目标导航页面，但是title以及被替换掉了，因此这里使用全局后置守卫是相对稳妥的，由上面可以看出实际的关键代码也就三行，其他照旧
constants.js的内容如下：
export default{
helloworld: '首页',
hello: '欢迎页',
user: '用户页'
}
只是简单将对象导出
总结
以上所述是小编给大家介绍的vue实现路由切换改变title功能,希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
ros编译package后，devel文件夹内没有对应package的可执行文件
网友评论