vue动态设置页面title的方法实例
本文主要介绍了Vue动态修改title的方法，需要的朋友可以参考学习，方法如下：
1.通过自定义指令去修改（单个修改比较好）
//1.在main.js页面里添加自定义指令
Vue.directive('title',{//单个修改标题
inserted:function(el,binding){
document.title=el.dataset.title
}
})
//2.在需要修改的页面里添加v-title指令
2.使用插件vue-wechat-title
//1.安装插件
npmvue-wechat-title--save
//2.在main.js里面引入插件
importVueWechatTitlefrom'vue-wechat-title'//动态修改title
Vue.use(VueWechatTitle)
//3.在路由里面添加title
routes:[{
path:'/login',
component:Login,
meta:{
title:'登录'
}
},{
path:'/home',
component:Home,
meta:{
title:'首页'
}
},]
//4.在app.vue中添加指令v-wechat-title
3.通过router.beforeEach导航守卫来修改
//1.在router的index里写自己的路径和title
constrouter=newRouter({
routes:[
{
path:'/login',
component:Login,
meta:{
title:'登录',
},
},
{
path:'/home',
component:Home,
meta:{
title:'首页',
},
},
],
})
//2.使用router.beforeEach对路由进行遍历，设置title
router.beforeEach((to,from,next)=>{
//beforeEach是router的钩子函数，在进入路由前执行
if(to.meta.title){
//判断是否有标题
console.log(to.meta.title)
document.title=to.meta.title
}else{
document.title='默认title'
}
next()
})
4.使用vue-mate修改title
https://github.com/declandewet/vue-meta文档中比较详细地说明了在浏览器端和服务器端如何使用vue-meta修改页面头部信息
总结
到此这篇关于vue动态设置页面title的文章就介绍到这了,更多相关vue动态设置页面title内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。