使用vue-router设置每个页面标题的方法 - 行业资讯 - 肥雀云

基本环境配置:webpack + vue2.0 + vue-router + nodeJS

进入路由器文件夹底下的index.js文件

　　　　　　从“Vue”进口Vue 　　从“vue-router”之前进口的路由器　　　　

然后在路由里面配置每个路由的地址:

　　　　　　路线:[ 　　{/*(首页)默认路由地址*/路径:“/? 　　名称:“入口”, 　　组件:入口, 　　元:{ 　　标题:“首页入口” 　　} 　　}, 　　{/*修改昵称*/路径:/modifyName:昵称, 　　名称:“modifyName”, 　　组件:modifyName, 　　元:{ 　　标题:“修改昵称“ 　　} 　　}, 　　{/*商品详情*/路径:/goodsDetail, 　　名称:“goodsDetail”, 　　组件:goodsDetail, 　　元:{ 　　标题:“商品详情” 　　} 　　}, 　　{/*没有找到路由,必须是最后一个路由*/路径:“*”, 　　组件:NotFound, 　　元:{ 　　标题:“找不到页面” 　　} 　　} 　　) 　　　　

在每一个元里面设置页面的标题名字,最后在遍历

　　　　　　路由器。beforeEach(下),从=比;{/*路由发生变化修改页面标题*/如果(to.meta.title) { 　　文档。title=to.meta.title 　　} 　　next () 　　}) 　　　　

这样就为每一个VUE的页面添加了标题

以上这篇使用vue-router设置每个页面标题的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。