vue路由跳转时更改页面title

路不在自己脚下

于 2019-04-29 18:34:38 发布

阅读量787

点赞数

分类专栏： vue.js

vue.js 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在Vue项目中通过配置router文件夹下的index文件，给每个路径添加meta属性以实现动态设置页面标题，并在main.js中添加代码实现路由变化时自动更新页面title。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、router文件夹下的index文件中给每个path添加meta:{}：

export default new Router({
	routes: [
		{
			path: '/',
			name: 'index',
			component: index,
			meta: {
				title: 'title1'
			}
		},
		{
			path: '/studentInfo',
			name: 'studentInfo',
			component: studentInfo,
			meta: {
				title: 'title2'
			}
		}   
	]
})
二、js入口文件main.js中添加代码：

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
    	document.title = to.meta.title
    }
    next()
})

作者：web_xyk
来源：优快云
原文：https://blog.youkuaiyun.com/web_xyk/article/details/80451561
版权声明：本文为博主原创文章，转载请附上博文链接！