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 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
javascript如何定义对象数组
Jun 07 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
vue接口请求加密实例
Aug 11 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
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极大的增强功能和性能
2006/10/09 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
js 判断 enter 事件
2009/02/12 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
python多进程实现进程间通信实例
2017/11/24 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
django-filter和普通查询的例子
2019/08/12 Python
python os.listdir()乱码解决方案
2021/01/31 Python
酒店服务与管理毕业生求职信
2013/11/02 职场文书
信息管理员岗位职责
2013/12/01 职场文书
班组长安全生产职责
2013/12/16 职场文书
聚美优品广告词改编
2014/03/14 职场文书
租房协议书范本
2014/04/09 职场文书
致运动员赞词
2015/07/22 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电