做单页应用时，一般页面布局的头部和尾部固定在布局页面上，中间是路由入口。此时，页眉标题在访问页面时不会改变。这个问题的解决方案如下：

标题信息通过使用beforeRouterEnter和元信息进行更新。单击查看文档

BeforeRouterEnter:第一次进入时调用。

BeforeRouterUpdate:在当前组件被重用时调用。

效果图如下：

注意页面标题和图标转换

路由元信息(元)配置

在路由元信息中配置页面标题，并通过组件中的路由守护程序获取

const Router=new Router({ mode : ' history '，base: process.env.BASE_URL，routes: [ { path: 'help '，name: 'help '，Meta: {title: '新手帮助' }，component: ()=import('。/view/help . vue ')}，{path:' page '，name:' page '，Meta : { title : ' baby information ' }，component : ()=import('。/view/page . vue ')}])路由布局页面

页眉和页脚是固定的页眉和页脚，main是路由条目。标题是页面标题

模板div id=' app ' header class=' header ' button @ click=' back ' class=' t-xixii icon font ' v-html=' icon '/button h1 class=' t-title ' { title } }/h1 router-link to='/search ' class=' t-sousuo iconfont'/router-link/header div class=' main ' router-view/router-view/div footer class=' footer '//./Footer /div/template在beforeRouteEnter和beforeRouteUpdate函数中获取路由元信息，并更新页面标题。

BeforeRouteEnter:第一次进入时，会被标题初始化一次

BeforeRouteUpdate:当组件被重复调用时，执行更新操作。

脚本导出默认{name :' app '，data(){ return { title : ' my site '，URL 3360'/'，图标：''}}，方法： {back () {this。$ router . go(this . URL)；}，更新(路由){[这个。标题，这个。网址，这个。icon]=['我的网站'，'/'，' ']；if(！['','/'].包括(route . path)){//确定根页面是否用于切换标题并返回上一页或主页[this.title，this.url，this.icon]=[route.meta.title | | ' '，'-1 '，' ']；}}}，before routenter(to，from，next){ next(VM={//回调函数，当此指针不可用时，可由回调函数访问。VM . update(to)；}) }，BeforeRouteupdated(to，from，next){ this . update(to)；next()；} };/脚本摘要

如上所述，边肖向大家介绍的vue路由器通过路由实现了切换头标题的功能。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！