[随笔] 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()
    	})
    

你可能感兴趣的:(vue,vue,js)