vue实现根据页面动态改变title

太过爱你忘了你带给我的痛 2022-12-22 09:19 170阅读 0赞

**老板，来一盘代码**

效果：  
![在这里插入图片描述][20201119102942562.png_pic_center]  
![在这里插入图片描述][20201119102948931.png_pic_center]

index.js 中

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({ 
      mode:"history",
      routes: [
        { 
          path: '/',
          name: 'one',
          component: ()=>import("@/components/one"),
          meta:{ 
            title: '首页',
        }
        },
        { 
          path: '/two',
          name: 'two',
          component: ()=>import("@/components/two"),
          meta:{ 
            title: '关于我们',
        }
        },
      ]
    })

main.js 中

import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    router.beforeEach((to, from, next) => { 
      /* 路由发生变化修改页面title */
      if (to.meta.title) { 
          document.title = 'swx-'+to.meta.title
      } else { 
          document.title = 'swx'
      }
      next()
    });
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>'
    })

[20201119102942562.png_pic_center]: /images/20221120/ca7083dbb1af4e7f8c184eb4811799a5.png
[20201119102948931.png_pic_center]: /images/20221120/59c08c2c42874638823c48aaab92f201.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关动态修改Vue项目中的页面title

一、在main.js中： // 设置浏览器标题 Vue.directive('title', { inserted: function (el

ゝ一世哀愁。/ 2023年01月21日 05:22/ 0 赞/ 169 阅读

相关 vue动态改变网页标题title

1.了解路由元在路由配置文件里配置meta标签是一个对象里面书写title(每个路由页面对应的标题) router/index.js {

绝地灬酷狼/ 2023年01月14日 10:57/ 0 赞/ 168 阅读

相关 vue实现根据页面动态改变title

老板，来一盘代码效果： ![在这里插入图片描述][20201119102942562.png_pic_center] ![在这里插入图片描述][2020111910

太过爱你忘了你带给我的痛/ 2022年12月22日 09:19/ 0 赞/ 171 阅读

相关 React-document-title实现动态更新页面Title

因为react是单页应用，所以可能需要根据不同的路由改变文档的title。我们可以使用react-document-title组件实现，其提供了一种document.tit

Bertha 。/ 2022年12月11日 07:52/ 0 赞/ 158 阅读

相关 vue动态修改meta的title

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迈不过友情╰/ 2022年09月03日 00:07/ 0 赞/ 238 阅读

相关 Vue 改变/动态改变 title

目的：vue改变 title。分两种情况，第一种你事先已经定义好了 title，比如首页啊什么的，第二种，是你无法确认的，比如一个看文章的页面，这个 tit

叁歲伎倆/ 2022年05月11日 01:50/ 0 赞/ 244 阅读

相关 vue-wechat-title动态修改title

在使用Vue制作项目的过程中，发现title没有变化所以使用vue-wechat-title插件动态修改tilte 一、安装 npm vue-wechat-title -

朱雀/ 2022年01月05日 02:33/ 0 赞/ 379 阅读

相关 vue-wechat-title动态修改title

在使用Vue制作项目的过程中，发现title没有变化所以使用vue-wechat-title插件动态修改tilte 一、安装 npm vue-wechat-title -

布满荆棘的人生/ 2021年12月22日 03:15/ 0 赞/ 329 阅读

相关 vue-wechat-title动态修改title

在使用Vue制作项目的过程中，发现title没有变化所以使用vue-wechat-title插件动态修改tilte 一、安装 npm vue-wechat-title -

梦里梦外;/ 2021年10月01日 04:50/ 0 赞/ 424 阅读

相关 vue动态设置title,使用 vue-wechat-title

1.安装依赖 npm install vue-wechat-title --save 2.引用在main.js import VueWechatTitle

梦里梦外;/ 2021年08月26日 20:32/ 0 赞/ 564 阅读