如何动态修改Vue项目中的页面title

最新推荐文章于 2024-08-28 00:18:03 发布

lilly呀

最新推荐文章于 2024-08-28 00:18:03 发布

阅读量1.5w

点赞数 13

分类专栏： VUE 文章标签：前端动态修改Vue中的title

本文链接：https://blog.csdn.net/qq_26780317/article/details/106432307

版权

VUE 专栏收录该内容

21 篇文章 4 订阅

订阅专栏

本文介绍两种在Vue项目中设置页面标题的方法：一是使用document.title动态修改，适用于页面标题需实时变化的情况；二是通过vue-router的beforeEach钩子统一设置固定标题，确保每个路由页面有专属名称。

摘要由CSDN通过智能技术生成

前言：在项目中，我们有时候需要修改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