vue-router不得不掌握的知识点

至于什么是路由?什么是vue-router?好像已经不重要了,车都上了高速了,还想着没有牌照怎么办那可不行!那就先上车后补票吧。。。

  1. 路由的定义。
    通常而言,我们会有一个router文件夹,然后统一全局管理我们的路由系统。而路由系统在划分的时候,可以按照项目的功能模块,进行模块化定义,比如支付中心,意见反馈中心,用户信息中心,可以根据具体的场景自己定义,一般而言都是一个父路由下面一帮子路由,就像下面这样

    const users = [
      {
        path: "/user",
        name: "user",
        hidden: true,
        component: _import("users/index"),
        children: [{
          path: "userinfo",
          name: "userinfo",
          hidden: false,
          meta: {
            icon: ''
          },
          component: _import("users/userinfo")
        }]
      }
    ]

    用户中心index为入口,然后下面可以跟很多child,然后通过vue-router

    const routes = new Router({
      routes: 'XXX' 定义好的路由对象
    })
  2. 路由的常用字段信息。
    我们在定义路由的时候,可以看到最最最常用的几个字段。
    path、name、component、children、meta,还有自己自定义的,其余的几个大家顾名思义,见利忘义就了解了,meta的话,指的是路由元信息,我们可以在这里定义title或者是路由的显式还是隐藏的字段,这样就不用在跳转的时候,写冗余代码了。
  3. 导航守卫干的事情。

    可以看到这是一个导航守卫,我们获取到的路由元信息的title,然后动态实时的切换到浏览器的title,再来看看别的几个导航守卫。
    全局守卫
    1. 全局守卫【beforeEach】: 参数to, from,next
    2. 全局解析守卫【beforeResolve】: 在beforeEach后面,但是在导航被确认之前
    3. 全局后置钩子【afterEach】: 注意,这个不是守卫,而是一个钩子函数,这个没有next参数,而且也不会改变导航本身

    指定的顺序也是一目了然的,特别注意,守卫内的next函数必须调用,你可以加一些条件判断,但是一定要有next()

    路由独享的守卫
    除了全局定义的守卫和钩子,我们还可以给路由自己直接定义beforeEnter

    特别注意这里的next(),如果你不写,出错了别怪我,虽然你看着路由是渲染了,但是我们不写的时候,控制台只有 111,444。但是写了之后就会有111,444,222,333。按照这个顺序来讲,我们可以知道这几个是谁先谁后了。

    组件内守卫
    顾名思义,组件内的守卫,肯定是组件内部使用,前面我们介绍的四种,是在定义路由的时候,全局统一的来处理,但是当我们在一个组件或者路由内部的时候,有一些逻辑需要根据不同的场景来调用,我们可以这样
    1. beforeRouteEnter【访问不到this,可以用vm代替】
    2. beforeRouteUpdate【可以访问this】主要用在动态路由
    3. beforeRouteLeave【可以访问this】
    具体看下图

    把之前的顺序衔接起来,是不是会发现这几个执行的顺序啊!这就是导航解析的流程

    1. 导航被触发。
    2. 在失活的组件里调用离开守卫。
    3. 调用全局的 beforeEach 守卫。
    4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
    5. 在路由配置里调用 beforeEnter
    6. 解析异步路由组件。
    7. 在被激活的组件里调用 beforeRouteEnter
    8. 调用全局的 beforeResolve 守卫 (2.5+)。
    9. 导航被确认。
    10. 调用全局的 afterEach 钩子。
    11. 触发 DOM 更新。
    12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
  4. vue-router的跳转使用方式。
    标签式:

    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>

    编程式:

    this.$router.push({
      name: 'XXX',
      query: {},
      params: {}
    })

    当我们只是一个简单的跳转的时候,可以直接用标签来解决,减少代码量。

  5. 路由query和params。
    通常我们都是两个都用,但是有一种情况很特殊

    this.$router.push({
      name: 'XXX',
      params: { userId: '123' },
      query: { id: '123' }
    })
    // 上面这种情况是都没问题的
    this.$router.push({
      path: 'XXX',
      params: { userId: '123' }
    })
    // 当是path的时候,会消失掉

    一般而言,我们只是简单的区别显式query,隐式params
    但是当我们动态路由的时候,就会有特殊的地方,实际上是一个组件,只不过是路由动态变化而已,这个时候path的时候就会有一种规则:
    如果是使用path来跳转,params会被忽略,从而导致丢失

  6. 监听路由。watch
    watch: {
      '$route' (to, from) {
        // 路由变化的时候,来做一些判断,也未尝不可
      }
    }

发表评论

电子邮件地址不会被公开。 必填项已用*标注