Vue相关（二）

emoRui77

已于 2023-03-20 18:19:24 修改

阅读量412

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端

于 2022-10-12 17:45:00 首次发布

本文链接：https://blog.csdn.net/wdRuiRui/article/details/127259734

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

前言
六、Vue-router 导航守卫
七、路由懒加载
八、路由的重定向与别名
九、对于keep-alive的了解
十、简单聊一下单页面应用SPA的优缺点

前言

Pure of heart， life is full of sweetness and joy.
心灵纯洁的人，生活充满甜蜜和喜悦。
------ 列夫·尼古拉耶维奇·托尔斯泰

六、Vue-router 导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。
你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

每个守卫方法接收三个参数：
to: Route: 即将要进入的目标路由对象。

from: Route: 当前导航正要离开的路由。

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

关于next：
1.next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

2.next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

3.next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

4.next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

5.确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

全局守卫

全局前置守卫
router.beforeEach 注册一个全局前置守卫：
router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置守卫
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
            没有next方法next：undefined
})

路由独享守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
             routes: [
               {
                 path: '/foo',指定独享守卫路由位置
                 component: Foo,
                 beforeEnter: (to, from, next) => {
                    // ...
                 }
                }
               ]
})

这些守卫与全局前置守卫的方法参数是一样的。

组件内的守卫

 const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

(1)beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
(2)不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
(3)注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
(4)还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

七、路由懒加载

我们在路由中通常会定义很多不同的页面。如果不应用懒加载的话，很多页面都会打包到同一个js文件中，文件将会异常的大。造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现短暂的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载用时。

也就是说：一开始进入页面时不需要一次性把资源都加载完，需要时在加载对应的资源。

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合 Vue 的异步组件 (opens new window)和 Webpack 的代码分割功能 (opens new window)，轻松实现路由组件的懒加载。

在这里插入图片描述

八、路由的重定向与别名

重定向：
　　在定义路由的时候，可以通过添加redirect参数，重定向到另外一个页面。

	routes: [{
           path: "/",
           redirect: "/article"
        }]

别名：
　　在定义路由的时候，可以通过添加alias参数，表示该url的别名，以后也可以通过这个别名来访问到这个组件。

    let router = new VueRouter({
        routes: [ {
            path: "/article",
            component: article,
            alias: "/list"
        }]
    })