深入理解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 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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类
2006/11/27 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
对javascript继承的理解
2016/10/11 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
python3写爬取B站视频弹幕功能
2017/12/22 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
自学python用什么系统好
2020/06/23 Python
pytorch实现查看当前学习率
2020/06/24 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
玲玲的画教学反思
2014/02/04 职场文书
市场营销工作计划书
2014/09/15 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
销售人员管理制度
2015/08/06 职场文书