深入理解Vue router的部分高级用法


Posted in Javascript onAugust 15, 2018

今天要介绍的是路由元信息,滚动行为以及路由懒加载这几个的使用方法。

1.路由元信息

什么是路由元信息,看看官网的解释,定义路由的时候可以配置 meta 字段可以匹配meta字段,那么我们该如何使用它,一个简单的例子,改变浏览器title的值。下面上代码。

//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
  mode: 'history',
  routes: [
    {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
    {path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
  ]
})
//可以在跳转之前判断跳转的组件的名字并用window.document.title赋值
Router.beforeEach((to,from,next) => {
  window.document.title=to.meta.title
})

上面的是不是看上去很简单呢,但是它并不简单,我只是举了一个比较小的例子罢了。还要看大家怎么活学活用这样才好,但是我强调几点需要注意的

第一点就是这个beforeEach页面跳转之前调用,好处是比如想要改变title的值不会显得太突兀,可以直接替换。

第二点afterEach这个不用我说了吧这个是在组件跳转之后调用比较适用于返回页面之前浏览过的区域或者是让页面返回顶部的操作。

2.滚动行为

想必各位同学应该知道我要讲些什么了没错就是页面的前进和后退时的滚动事件,怎么实现呢,有两种实现方式,先看代码。

//刚才我说过的方法直接使用afterEach方法去实现组件的scrollTo归零
Router.afterEach((to,from,next) => {
  window.scrollTo(0,0)
})

下面是真正的回滚事件可以看看

//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
  mode: 'history',
  routes: [
    {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
    {path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
  ],
  //有两种小的方式进行回滚
  //{ x: number, y: number }
  //{ selector: string, offset? : { x: number, y: number }}
  //第二种方式仅适用于(offset 只在 2.6.0+ 支持)
  scrollBehavior (to, from, savedPosition) {
  console.log(savedPosition)
  return { x: 0, y: 0 }
  }
})

上面我们介绍了scrollBehavior的回滚方法或者说是scrollBehavior的滚动行为,但是想必大家可能对这种方法还有些不太理解,下面我们看看官网是怎么讲解的,使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。没错这个方法就是scrollBehavior滚动行为。另外需要注意: 这个功能只在支持 history.pushState 的浏览器中可用。更多的使用方法可以去官网去看看。

3.路由懒加载

或许不应该叫路由懒加载应该叫按需加载我觉着是更合适的。不解释以后用多了你们就会理解。下面上代码。

//代码很简单看看就知道了,下面只贴部分代码
{path:'homepages',name:'Homepages',component:homepages,resolve}

没错只要使用resolve就能实现按需加载的要求,是不是很简单,但是resolve还有很多其他使用方式建议去官网看看。另外诸如go(),history等方法的使用还是去官网上看看自己写出来理解会更快。

总结

以上所述是小编给大家介绍的Vue router的部分高级用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery插件validate验证的小例子
May 08 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
js style动态设置table高度
Oct 21 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
angular实现商品筛选功能
Feb 01 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JS打印彩色菱形的实例代码
Aug 15 #Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 #Javascript
layui 优化button按钮和弹出框的方法
Aug 15 #Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 #Javascript
React+Webpack快速上手指南(小结)
Aug 15 #Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
window.open的功能全解析
2006/10/10 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
Angular实现form自动布局
2016/01/28 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
django缓存配置的几种方法详解
2018/07/16 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
银行授权委托书格式
2014/10/10 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
python代码实现扫码关注公众号登录的实战
2021/11/01 Python