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 相关文章推荐
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
PassWord输入框代码分享
Jun 07 Javascript
微信小程序开发探究
Dec 27 Javascript
js数组实现权重概率分配
Sep 12 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP引用返回用法示例
2016/05/28 PHP
取得传值的函数
2006/10/27 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python属于解释型语言么
2020/06/15 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
养殖行业的创业计划书
2014/01/05 职场文书
高中生活自我鉴定
2014/01/18 职场文书
医院工作检讨书范文
2014/02/10 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
村委会贫困证明范本
2014/09/17 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书