vue路由跳转动态title标题信息

最新推荐文章于 2024-08-07 10:25:36 发布

Artoria-Pendragon

最新推荐文章于 2024-08-07 10:25:36 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_45381828/article/details/99728568

版权

本文介绍了如何在Vue项目中利用路由的meta信息动态修改页面标题。通过在路由配置中设置`meta`对象的`title`属性，然后在`main.js`文件中使用`beforeEach`钩子函数，根据即将跳转的路由`to.meta.title`来更新`document.title`，实现路由切换时页面标题的自动更新。

摘要由CSDN通过智能技术生成

：如上图
先写路由
如：随便模拟一条二级路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:main,
      children:[
      {
      	path: '/',
	      name: 'HelloWorld',
	      component:y1,
	      meta:{
	      	title:'用户列表'
	      }
      },
      {
      	path: '/main/y2',
	      name: 'HelloWorld',
	      component:y2,
	      meta:{
	      	title:'列表信息'
	      }
      },
      {
      	path: '/main/y3',
	      name: 'HelloWorld',
	      component:y3,
	      meta:{
	      	title:'信息管理'
	      }
      },
      {
      	path: '/main/y4',
	      name: 'HelloWorld',
	      component:y4,
	      meta:{
	      	title:'修改信息'
	      }
      }]
    }
  ]
})

以上代码为路由代码，主要部分为：