如何动态修改Vue项目中的页面title
https://www.jianshu.com/p/7c3f52f640abhttps://www.jianshu.com/p/36b47d63cdb1https://www.cnblogs.com/linxue/p/9647739.html
前言:在项目中,我们有时候需要修改Vue项目中的页面title。
方法有两种,①如果需要动态设置页面的title,可以直接使用document.title;②可以使用router的beforeEach去统一设置,这种方法使用每个页面都是固定的标题,在进入路由就赋值标题,进入路由后就不修改了。
一、方法一使用document.title动态修改页面标题
(1)在index.js中设置document.title
//设置游览器标题
Vue.directive({
inserted: function(el,binding){
document.title = el.dataset.title
}
})
(2)在某个页面最大的div上设置v-title data-title
加上以下代码:
v-title data-title="人生计划书"
效果如下图所示:
其实,还有更简单的方法,在页面中直接赋值给document.title,这样还可以在页面中随时动态切换。
二、方法二使用beforeEach去统一设置
利用vue-router可以开发单页面应用,但实际中每个页面级别的路由都有自己的title名,这就要利用router的beforeEach去统一设置。
const router = new Router({
routes:[
{
path:'/',
name:'index',
meta:{title:"我是首页"},
component: Index
},
{
path:'/',
name:'index',
meta:{title:"我是列表页"},
component: List
}
]
})
router.beforeEach((to,from,next)=>{//beforeEach是router的钩子函数,在进入路由前执行
if(to.meta.title){//判断是否有标题
document.title = to.meta.title
}
next() //执行进入路由,如果不写就不会进入目标页
})
export default router
这种方法,beforeEach是router的钩子函数,在进入路由前执行的,所以,在进入页面前就对标题进行赋值了。所以,如果进入页面之后,需要修改标题,还是需要用document.title来修改的。
参考博客:
动态修改vue项目中的页面title https://www.jianshu.com/p/36b47d63cdb1
vue-router之页面标题的动态设置 https://www.jianshu.com/p/7c3f52f640ab
动态设置页面的title https://www.cnblogs.com/linxue/p/9647739.html
更多推荐
所有评论(0)