Vue-Router模式和钩子的用法


Posted in Javascript onFebruary 28, 2018

上一篇主要写了一下vuer-router的基本使用,可以说解决温饱了,下面就再来点下午茶吧

模式

vue-router中的模式选项主要在router实例化的时候进行定义的,如下

const router = new VueRouter({
 mode: 'history', // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

有两种模式可供选择,history 和 hash,大致对比一下,

模式 优点 缺点
hash 使用简单、无需后台支持 在url中以hash形式存在,不会传到后台
history 地址明确,便于理解和后台处理 需要后台配合

hash模式对于后台来讲就是一个url,因为地址中的hash值是不会传到后台的,所以服务器端做一个根地址的映射就可以了。
history模式最终的路由都体现在url的pathname中,这部分是会传到服务器端的,因此需要服务端对每一个可能的path值都作相应的映射。或者采用模糊匹配的方式进行映射。

除此之外,history模式下,如果后端不是一对一的进行映射,而是模糊匹配的话,那么就要注意一下404的情况了。这个时候就需要在前端router中定义404页面了。

404路由的定义

由于router本身的匹配是从上到下的,如果在前面找到了匹配的路由,就跳转了。因此可以直接在最后添加404的路由,如下

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: '红包'
    }
  }]
}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-页面丢了'
  }
}]

在前面匹配不到的时候,* 代表全部,就是都指向404页面

路由钩子

路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的,靠。。好拗口啊。

总体来讲vue里面提供了三大类钩子

1、全局钩子
2、某个路由独享的钩子
3、组件内钩子

全局钩子

顾名思义,全局钩子全局用,使用如下

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

某个路由独享钩子

就像说的一样,给某个路由单独使用的,本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是,这里的一般定义在router当中,而不是在组件内。如下

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

组件内钩子

首先看一下官方定义:

你可以在路由组件内直接定义以下路由导航钩子

  1. beforeRouteEnter
  2. beforeRouteUpdate (2.2 新增)
  3. beforeRouteLeave

路由组件!路由组件!路由组件!重要的事情说三遍,大家一定要注意这里说的是“路由组件”,而路由组件!== 组件,路由组件!== 组件,路由组件!== 组件!之前一直没注意这点,然后在子组件里面傻乎乎的调钩子函数发现一直没用。。。

我们先来看一下什么是路由组件?

路由组件:直接定义在router中component处的组件

也就是说router中定义的入口vue文件之外的组件,是没有钩子函数的,也就不用说使用了。但是如果你使用了并不会报错,只是没反应。(本想画个图的,太懒了。。。自己理解理解吧,很好理解的)

这里再回头看下这个路由内钩子是怎么用的,很简单和data、method平级的方法

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧

  1. to: Route: 即将要进入的目标 路由对象
  2. from: Route: 当前导航正要离开的路由
  3. next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  4. next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  5. next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  6. next(‘/') 或者 next({ path: ‘/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

模式和钩子基本就到这了,有需要的可以在仔细研究一个官当的文档。以上仅是个人学习使用过程的一些理解,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
js实现缓动动画
Nov 25 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 #Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 #Javascript
vue cli 全面解析
Feb 28 #Javascript
js实现动态改变radio状态的方法
Feb 28 #Javascript
快速了解vue-cli 3.0 新特性
Feb 28 #Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
vue.js根据代码运行环境选择baseurl的方法
Feb 28 #Javascript
You might like
php高级编程-函数-郑阿奇
2011/07/04 PHP
php+highchats生成动态统计图
2014/05/21 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
JavaScript日历实现代码
2010/09/12 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
Python笔记之工厂模式
2019/11/20 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
中学老师的自我评价
2013/11/07 职场文书
加拿大留学自荐信
2014/01/28 职场文书
英文邀请函
2015/02/02 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
解除合同协议书范本
2016/03/21 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技