vue 路由发生变化修改页面title

最新推荐文章于 2025-09-28 14:56:48 发布

原创最新推荐文章于 2025-09-28 14:56:48 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #router #router-title

vue插件使用专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue项目中使用路由守卫beforeEach来动态设置页面标题，通过在路由配置的meta属性中添加title字段，实现页面切换时自动更新浏览器标题。

在main.js中写

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

router文件中


export default new Router({
	mode: 'history',
	routes: [{
			path: '/',
			name: 'Index',
			component: Index,
			meta: {
                //这个就是需要改变的title
				title: "首页"
			}
		},{
			path: '/Login',
			name: 'Login',
			component: Login,
			meta: {
                //这个就是需要改变的title
				title: "登录"
			}
		},

	]
})