vue实现路由切换改变title功能
更新时间：2019年05月28日 09:32:36 作者：Garrettzxd
这篇文章主要介绍了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配置生产环境.env.production与测试环境.env.development
这篇文章主要介绍了vue配置生产环境.env.production与测试环境.env.development方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
第一次在Vue中完整使用AJAX请求和axios.js的实战记录
AJAX是现代Web开发的一个关键部分,尽管它一开始看起来令人生畏,但在你的武库中拥有它是必须的,下面这篇文章主要给大家介绍了关于第一次在Vue中完整使用AJAX请求和axios.js的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要和大家一起聊一聊Vue.js过渡效果、CSS 过渡效果、纯 JavaScript过渡效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
这篇文章主要介绍了vue项目 使用Hbuilder打包app 设置沉浸式状态栏的方法，本文通过实例代码效果图展示给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue2.0 如何在hash模式下实现微信分享,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
本篇文章主要介绍了详解.vue文件中监听input输入事件（oninput），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
electron dialog.showMessageBox的使用案例
Electron Dialog 模块提供了api来展示原生的系统对话框,本文主要介绍了electron dialog.showMessageBox的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
vue-router history模式服务器端配置过程记录
vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下2021-06-06
路由导航守卫提供了一些钩子函数,可以在路由导航过程中进行拦截和控制,其中,beforeEach 导航守卫可以在每次路由切换前被触发,本文给大家介绍Vue路由守卫详解,感兴趣的朋友一起看看吧2023-10-10
最新评论