Vue-Router模式、钩子

上一篇主要写了一下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) => {
        // ...
      }
    }
  ]
})

组件内钩子

首先看一下官方定义:

你可以在路由组件内直接定义以下路由导航钩子 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave

路由组件!路由组件!路由组件!重要的事情说三遍,大家一定要注意这里说的是“路由组件”,而路由组件!== 组件,路由组件!== 组件,路由组件!== 组件!之前一直没注意这点,然后在子组件里面傻乎乎的调钩子函数发现一直没用。。。 我们先来看一下什么是路由组件?

路由组件:直接定义在router中component处的组件

也就是说router中定义的入口vue文件之外的组件,是没有钩子函数的,也就不用说使用了。但是如果你使用了并不会报错,只是没反应。(本想画个图的,太懒了。。。自己理解理解吧,很好理解的) 这里再回头看下这个路由内钩子是怎么用的,很简单和data、method平级的方法

beforeRouteLeave(to, from, next) {
    // ....
    next()
},
beforeRouteEnter(to, from, next) {
    // ....
    next()
},
beforeRouteUpdate(to, from, next) {
    // ....
    next()
},
computed: {},
method: {}

三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧

to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。 next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。 next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

模式和钩子基本就到这了,有需要的可以在仔细研究一个官当的文档。以上仅是个人学习使用过程的一些理解,如果错误,欢迎指出~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端_Web

深入理解JS异步编程(一)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

46050
来自专栏友弟技术工作室

Beego Controllercontroller 逻辑控制器介绍Controller中数据参数处理获取参数

controller就是处理具体的逻辑的,router将请求分发到指定的controlller,controller处理请求,然后返回。 首先我们还是从源码分...

34320
来自专栏木宛城主

Unity应用架构设计(10)——绕不开的协程和多线程(Part 2)

在上一回合谈到,客户端应用程序的所有操作都在主线程上进行,所以一些比较耗时的操作可以在异步线程上去进行,充分利用CPU的性能来达到程序的最佳性能。对于Unit...

407110
来自专栏菩提树下的杨过

mac/linux中vim永久显示行号、开启语法高亮

注:如果是mac,更好的办法是直接换掉默认的终端,改用zsh,百度一下zsh,有很多教程,

26520
来自专栏我的小碗汤

来看三个问题

是否允许在HTTP请求时,返回原始请求体数据字节,默认为false(GET or HEAD or 上传文件请求除外)。

12510
来自专栏全沾开发(huā)

EJS[0]-如何使用EJS

EJS[0]-如何使用EJS 最近做的一个新项目,所以想着换一个新的模版引擎尝试一下。(之前我们一直在使用handlebars) ...

40180
来自专栏小特工作室

基于Lodop控件的Web打印示例(含源码)

      最近项目组的打印控件有所改变,已经换成Lodop控件,使用以后发现,功能确实非常强大.可以打印Web页面内某个控件的内容.下面,还是通过一个实例来说...

28280
来自专栏编程之旅

2.24

oc中的内存管理机制:使用一种叫做引用计数的机制来管理内存中的对象。OC中每个对象都对应着他的引用计数,引用计数可以理解为一个整数计数器,当使用alloc方法创...

13130
来自专栏坚毅的PHP

雅美尓(yaml)实战

献给跟我一样对yaml(雅美尓)有婶婶挫败感的同学!         开始第一个pylon工程,我们就跟yaml配置文件开始了不解之缘。yaml是什么?它有哪些...

55980
来自专栏北京马哥教育

玩转Linux - 神级工具 sed & awk

简介 本文主要介绍 Linux 系统的两个神级工具:sed 和 awk ,他们是Linux高手们必备的技能,很值得我们去研究的东西。 这里是我在网上书上收集的相...

35980

扫码关注云+社区

领取腾讯云代金券