vue如何实现路由切换改变title功能-创新互联

这篇文章给大家分享的是有关vue如何实现路由切换改变title功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都一家集口碑和实力的网站建设服务商，拥有专业的企业建站团队和靠谱的建站技术，十载企业及个人网站建设经验 ,为成都千余家客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设，高端网站设计，同时也为不同行业的客户提供网站设计、成都网站设计的服务,包括成都电商型网站制作建设,装修行业网站制作建设，传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选创新互联建站。

由于vue项目通常是单页应用，因此在入口文件index.html只有一个title，单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已，因此此时的title属性是不会随着页面的切换而变更的

那么想实现路由切换title变换可以通过vue-router的导航守卫来实现，最简单的的目录结构可如下所示

├── index.html
├── main.js
├── api
│  └── ... # 抽取出API请求
├── common
│  └── constants.js  //title值
├── components
│  ├── HelloWorld.vue
│  ├── Test.vue
│  ├── User.vue
│  └── ...
├── router
│  └── index.js

下面主要就是vue-router的内容了，其他页面级别的内容无关紧要

router/index.js内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import constants from '../common/constants'
Vue.use(Router)
const router = new Router({
 routes: [{
    path: '/',
    name: 'HelloWorld',
    component: reslove => require(['../components/HelloWorld'], reslove)
  },{
   path: '/hello',
   name: 'hello',
   props: {name: 'garrett'},
   component: reslove => require(['../components/Test'], reslove)
  },{
   path: '/user',
   name: 'user',
   component: reslove => require(['../components/User'], reslove)
  },{
   path: '*',
   redirect: {name: 'hello'}
  }]
})
//导航后置守卫，可以在确定导航到目标页面时再更改title
router.afterEach((to, from) => {
 window.document.title = constants[to.name];
})
export default router;

在这里使用全局后置守卫来对路由切换进行统一操作，全局前置守卫在正常情况下也可以，但是如果出现导航一半终止掉，会出现页面没有被渲染为目标导航页面，但是title以及被替换掉了，因此这里使用全局后置守卫是相对稳妥的，由上面可以看出实际的关键代码也就三行，其他照旧

constants.js的内容如下：
export default{
 HelloWorld: '首页',
 hello: '欢迎页',
 user: '用户页'
}

感谢各位的阅读！关于“vue如何实现路由切换改变title功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

网页标题：vue如何实现路由切换改变title功能-创新互联
文章路径：http://cdxtjz.cn/article/gojgc.html