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

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

老板，来一盘代码

效果：
在这里插入图片描述
在这里插入图片描述

index.js 中

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  4. Vue.use(Router)
  6. export default new Router({ 
  7.   mode:"history",
  8.   routes: [
  9.     { 
  10.       path: '/',
  11.       name: 'one',
  12.       component: ()=>import("@/components/one"),
  13.       meta:{ 
  14.         title: '首页',
  15.     }
  16.     },
  17.     { 
  18.       path: '/two',
  19.       name: 'two',
  20.       component: ()=>import("@/components/two"),
  21.       meta:{ 
  22.         title: '关于我们',
  23.     }
  24.     },
  25.   ]
  26. })

main.js 中

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  5. router.beforeEach((to, from, next) => { 
  6.   /* 路由发生变化修改页面title */
  7.   if (to.meta.title) { 
  8.       document.title = 'swx-'+to.meta.title
  9.   } else { 
  10.       document.title = 'swx'
  11.   }
  12.   next()
  13. });
  15. Vue.config.productionTip = false
  17. /* eslint-disable no-new */
  18. new Vue({ 
  19.   el: '#app',
  20.   router,
  21.   components: {  App },
  22.   template: '<App/>'
  23. })

发表评论

表情：
评论列表 （有 0 条评论，301人围观）

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

相关阅读