深入理解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 相关文章推荐
json数据与字符串的相互转化示例
Sep 18 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
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在线解压ZIP文件的方法
2014/12/30 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
wxPython学习之主框架实例
2014/09/28 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python如何实现代码检查
2019/06/28 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
兼职学生的自我评价
2013/11/24 职场文书
理发店策划方案
2014/06/05 职场文书
校庆口号
2014/06/20 职场文书
会计求职自荐信
2014/06/20 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
教师学期个人总结
2015/02/11 职场文书
消防安全培训工作总结
2015/10/23 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP