vue实现路由切换改变title功能


Posted in Javascript onMay 28, 2019

由于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功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
vue中使用props传值的方法
May 08 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
Vue 无限滚动加载指令实现方法
May 28 #Javascript
vue实现搜索过滤效果
May 28 #Javascript
微信小程序 image组件遇到的问题
May 28 #Javascript
vue实现搜索功能
May 28 #Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 #Javascript
如何实现双向绑定mvvm的原理实现
May 28 #Javascript
vue实现带复选框的树形菜单
May 27 #Javascript
You might like
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
小程序api实现promise封装过程解析
2019/11/21 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
娱乐地球:Entertainment Earth
2020/01/08 全球购物
总经理司机岗位职责
2014/02/06 职场文书
工会主席岗位责任制
2014/02/11 职场文书
创建文明学校实施方案
2014/03/11 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
校园文化标语
2014/06/18 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python