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 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
vue router demo详解
Oct 13 Javascript
vue2中使用less简易教程
Mar 27 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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
一个php作的文本留言本的例子(一)
2006/10/09 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
jQuery代码优化 遍历篇
2011/11/01 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
浅谈$('div a') 与$('div>a')的区别
2016/07/18 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
原生JavaScript实现换肤
2021/02/19 Javascript
python中的全局变量用法分析
2015/06/09 Python
Python操作串口的方法
2015/06/17 Python
python的移位操作实现详解
2019/08/21 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
python实现在一个画布上画多个子图
2020/01/19 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
如何掌握自荐信格式呢
2013/11/19 职场文书
乡下人家教学反思
2014/02/01 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
公司欠款证明
2015/06/24 职场文书
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python