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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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生成自己的LOG文件
2006/10/09 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
javascript数组详解
2014/10/22 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python类参数self使用示例
2014/02/17 Python
Python制作简易注册登录系统
2016/12/15 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
abstract是什么意思
2012/02/12 面试题
上班迟到检讨书
2014/01/10 职场文书
企业文化标语大全
2014/06/10 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
小学生通知书评语
2014/12/31 职场文书
贪污检举信范文
2015/03/02 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript