[随笔] Vue 路由守卫——页面 title 动态改变

  • 需求
    实现切换路由时,标签页显示的 title 会根据不同页面发生改变

  • 实现
    (1)在路由配置页面 (src/router/index.js)中,给每项路由(routes)配置添加路由元信息 meta ,如:

    	{
          path: '/news',
          name: 'news',
          component: news,
          meta: { title: '公司新闻' }
        }
    

    (2)在入口 js 文件 — main.js 中,配置路由守卫,监视路由变化:

    	router.beforeEach((to, from, next) => {
    	  if (to.meta.title) {
    	    document.title = to.meta.title
    	  }
    	  next()
    	})
    
发布了23 篇原创文章 · 获赞 2 · 访问量 3877
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览