Vue使用router设置页面title

白衣少年
2023-04-16 / 0 评论 / 22 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年04月16日,已超过318天没有更新,若内容或图片失效,请留言反馈。

一般来说,如果不对vue中新打开的页面进行设置,会默认使用首页的title作为新打开的vue页面title。对vue-router跳转到的页面设置单独的页面title,分为如下2步:

  1. 在src中的router的router.js文件中
    router.js.png
    对需要单独设置页面title的路由,增加meta属性,在meta里面新增页面的title名字属性:

    router.js2.png

    具体代码:

     {
     path: '/',
     name: 'home',
     component: HomeView,
     meta:{
     title:'首页'
     }
    }
  2. 在路由配置的下方,把新增meta的title属性设置为页面title的方法:
    meta的title
    具体代码:

    //router设置页面标题
    router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
     document.title = to.meta.title
    }
     next()
    })

这样设置以后,就可以实现对vue中为每个vue-router跳转的页面设置单独的页面title了。

3

打赏

评论 (0)

OwO
取消