vue动态改变网页标题title

绝地灬酷狼 2023-01-14 10:57 308阅读 0赞

1.了解路由元

  • 在路由配置文件里 配置meta标签 是一个对象 里面书写title(每个路由页面对应的标题)

router/index.js

  1. { 
  2.     path: '/',
  3.     name: 'index',
  4.     component: () => import('@/views/index.vue'),
  5.     meta: {  title: '首页' }
  6. }

2.全局钩子函数 router.beforeEach(to,form ,next)

  • router.beforeEach是 vue全局的的一个路由的钩子函数，也可以用来做登录拦截
  • 有三个参数 to 表示将要前往那个路由，from表示来自那个路由, next表示执行函数，如果执行完了 那么结果就是true 否则就是false

main.js

  1. import router from './router'
  3. router.beforeEach((to, from, next) => { 
  4.     if (to.meta.title) { 
  5.         document.title = to.meta.title
  6.     }
  7.     next()
  8. });

发表评论

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

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

相关阅读