vue实现路由切换改变title功能
由于vue项目通常是单页应用,因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的
那么想实现路由切换title变换可以通过vue-router的导航守卫来实现,最简单的的目录结构可如下所示
├──index.html ├──main.js ├──api │└──...#抽取出API请求 ├──common │└──constants.js//title值 ├──components │├──HelloWorld.vue │├──Test.vue │├──User.vue │└──... ├──router │└──index.js
下面主要就是vue-router的内容了,其他页面级别的内容无关紧要
router/index.js内容如下:
importVuefrom'vue' importRouterfrom'vue-router' importconstantsfrom'../common/constants' Vue.use(Router) constrouter=newRouter({ 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]; }) exportdefaultrouter;
在这里使用全局后置守卫来对路由切换进行统一操作,全局前置守卫在正常情况下也可以,但是如果出现导航一半终止掉,会出现页面没有被渲染为目标导航页面,但是title以及被替换掉了,因此这里使用全局后置守卫是相对稳妥的,由上面可以看出实际的关键代码也就三行,其他照旧
constants.js的内容如下: exportdefault{ HelloWorld:'首页', hello:'欢迎页', user:'用户页' }
只是简单将对象导出
总结
以上所述是小编给大家介绍的vue实现路由切换改变title功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!