如何通过Vue Router路由实现头部切换功能的长尾？

本文共计824个文字，预计阅读时间需要4分钟。

在开发单页面应用时，页面布局通常包括头部和尾部两块固定区域，中间为路由入口。访问页面时，头部保持不变。以下是一些解决问题的方案：

1. 使用组件内路由卫士（before）： - 在路由配置中，为每个路由设置before钩子函数，该函数负责修改。例如： javascript const router=new VueRouter({ routes: [ { path: '/', component: Home, meta: { title: '首页' } }, { path: '/about', component: About, meta: { title: '关于' } } ] });

router.beforeEach((to, from, next)=> { document.title=to.meta.title; next(); });

在做单页面应用程序时，一般页面布局头尾两块都是固定在布局页面，中间为是路由入口。这时访问页面时头部标题不会变，该问题的解决方案如下：

通过采用组件内路由卫士(beforeRouterEnter、beforeRouterUpdate)与路由元信息(meta) 来实现更新头部标题信息。点击查看文档

beforeRouterEnter：第一次进入时调用。

beforeRouterUpdate：重复使用当前组件时调用。