vue设置title

àì夳堔傛蜴生んèń 2022-06-01 02:06 295阅读 0赞

路由配置页router/index.js

  1. routes: [
  2.     {          /* （首页）默认路由地址 */
  3.       path: '/',
  4.       name: 'Entrance',
  5.       component: Entrance,
  6.       meta: {
  7.         title: '首页入口'
  8.       }
  9.     },
  10.     {          /* 修改昵称 */
  11.       path: '/modifyName/:nickName',
  12.       name: 'modifyName',
  13.       component: modifyName,
  14.       meta: {
  15.         title: '修改昵称'
  16.       }
  17.     },
  18.     {          /* 商品详情 */
  19.       path: '/goodsDetail',
  20.       name: 'goodsDetail',
  21.       component: goodsDetail,
  22.       meta: {
  23.         title: '商品详情'
  24.       }
  25.     },
  26.     { /* Not Found 路由，必须是最后一个路由 */
  27.       path: '*',
  28.       component: NotFound,
  29.       meta: {
  30.         title: '找不到页面'
  31.       }
  32.     }
  33.   ]

在每一个meta里面设置页面的title名字，最后在遍历。main.js

  1. import router from './router'
  2. router.beforeEach((to, from, next) => {
  3.   /* 路由发生变化修改页面title */
  4.   if (to.meta.title) {
  5.     document.title = to.meta.title
  6.   }
  7.   next()
  8. })

发表评论

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

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

相关阅读