vue动态改变title

最新推荐文章于 2025-06-18 16:19:36 发布

M_SSY

最新推荐文章于 2025-06-18 16:19:36 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： js

本文链接：https://blog.youkuaiyun.com/M_SSY/article/details/90375170

VUE 专栏收录该内容

30 篇文章

订阅专栏

博客介绍了在HTML中设置页面标题的方法。可在index.html的head标签title元素里写，也能根据路由设置。需先安装，在main.js、首页最外层div、customOrder及各页面编写相关代码，还可在页面判断后给title赋值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般写title会在index.html里的head标签title元素里面写

可以根据路由写title

首先要安装

cnpm install vue-wechat-title --save

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta:{
        keepAlive:true,
        title:'团体终身重大疾病保险'
      }
    },
    {
      path: '/customOrder',
      name: 'customOrder',
      component: customOrder,
      meta:{
        title:'订单中心'
      }
    },
})

main.js里面的代码:

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面meta */
  if(to.meta.content){
    let head = document.getElementsByTagName('head');
    let meta = document.createElement('meta');
    meta.content = to.meta.content;
    head[0].appendChild(meta)
  }
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next()
});

在首页最外层的div里写

v-wechat-title="$route.meta.title"

在customOrder里面也要写,每个页面都写

还可以在页面里面进行判断然后给title赋值

例子(简单的例子,可以写个方法进行判断,然后赋值):

    jumpDetails(index,itemson){
      console.log(this.$route.meta.title+index,itemson)
    }