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 相关文章推荐
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
js实现一键复制功能
Mar 16 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
你准备好迎接vue3.0了吗
Apr 28 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模拟HTTP认证
2006/10/09 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
python基础教程之lambda表达式使用方法
2014/02/12 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
简述数组与指针的区别
2014/01/02 面试题
九年级体育教学反思
2014/01/23 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
离婚协议书样本
2015/01/26 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
离职信范本
2015/06/23 职场文书
2016国培研修心得体会
2016/01/08 职场文书
运动会主持人开幕词
2016/03/04 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
利用javaScript处理常用事件详解
2021/04/14 Javascript
JS实现九宫格拼图游戏
2022/06/28 Javascript