深入理解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实现用户注册的表单验证示例
Aug 28 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 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
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
取得传值的函数
2006/10/27 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python基础教程之缩进介绍
2014/08/29 Python
python图像处理之镜像实现方法
2015/05/30 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
宿舍违规检讨书
2014/01/12 职场文书
银行奉献演讲稿
2014/09/16 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
烈士陵园观后感
2015/06/08 职场文书