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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
详解js删除数组中的指定元素
2018/10/31 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
pandas实现导出数据的四种方式
2020/12/13 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
自我评价如何写好?
2014/01/05 职场文书
办理暂住证介绍信
2014/01/11 职场文书
服装创业计划书范文
2014/02/05 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
授权委托书怎么写
2014/04/03 职场文书
李敖北大演讲稿
2014/05/24 职场文书
会员卡清退活动总结
2014/08/27 职场文书
期末考试复习计划
2015/01/19 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL