小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

前言

使用了这么久的vue-router没怎么认认真真的看过官网。这里写写我之前半知不解的知识。

内容

目录结构

嵌套路由

router文件

{
    path: "/router",
    redirect: "/router/son1", // 当在一个路由下面的子孩子是包含里父亲的路径
    component: () => import('../views/Router/index.vue'),
    children: [
      {
        path: "son1",
        component: () => import('../views/Router/son1.vue')
      },
      {
        path: "son2",
        component: () => import('../views/Router/son2.vue')
      }
    ]
 }

这里不是完整的文件代码。

index.vue

<template>
  <div class="Router">
    Router
    <router-view></router-view>
  </div>
</template>

son1

<template>
  <div>
    son1
    <router-link to="son2">toSon2</router-link>
  </div>
</template>

son2

<template>
  <div>
    son2
    <router-link to="/router/son1">son1</router-link>
  </div>
</template>

结论

当我们渲染son1时候，就会把index.vue里面的router-view替换成son1的代码，当跳转到son2就更改成son2的代码。

命名视图

router文件

{
    path: "/router",
    redirect: "/router/son1",
    component: () => import('../views/Router/index.vue'),
    children: [
      {
        path: "son1",
        components:{ // 注意这里的s
          header:  () => import('../views/Router/son1.vue'),
          default: () => import('../views/Router/son2.vue'),
          footer: () => import('../views/Router/son2.vue')
        }
      },
      {
        path: "son2",
        component: () => import('../views/Router/son2.vue')
      }
    ]
  }

这里的header就是对应router-viewname等于header，依次类推。当router-view没有定义name就是对应到default

index.vue

<template>
  <div class="Router">
    Router
    <router-view class="header" name="header"></router-view>
    <router-view class="middle"></router-view>
    <router-view class="footer" name="footer"></router-view>
  </div>
</template>

路由组件传参

router.js

{
    path: "/router",
    redirect: "/router/son1",
    component: () => import('../views/Router/index.vue'),
    children: [
      {
        path: "son1",
        components:{ // 注意这里的s
          header:  () => import('../views/Router/son1.vue'),
          default: () => import('../views/Router/son2.vue'),
          footer: () => import('../views/Router/son2.vue')
        }
      },
      {
        path: "son2/:id",
        component: () => import('../views/Router/son2.vue'),
        props: true //关键
      }
    ]
  }

son1

<template>
  <div>
    son1
    <router-link to="son2/20">toSon2</router-link>
  </div>
</template>

son2

<template>
  <div>
    son2
    <router-link to="/router/son1">son1</router-link>
    {{id}}
  </div>
</template>

<script>
export default {
  props:['id']
}
</script>

结论

正常我们都是this.$route.params.id如此来拿params里面的值，这个组件传参好处就是把params下属性都写到了props中，只需要在路由表添加props: true

路由守卫

基础知识

前置守卫、后置守卫就不说了

组件内路由

听名字就知道这个路由函数是写在组件内部的有三个:

• beforeRouteEnter 进入组件 不可以用this
• beforeRouteUpdate 组件更新例如:前面的:id 20->30的转换 可以用this
• beforeRouteLeave 离开组件 可以用this

router.js

{
    path: "/router",
    redirect: "/router/son1",
    component: () => import('../views/Router/index.vue'),
    children: [
      {
        path: "son1",
        component:() => import('../views/Router/son1.vue'),
      },
      {
        path: "son2/:id", // 注意点在id
        component: () => import('../views/Router/son2.vue'),
        props: true
      }
    ]
  }

此文件注意点:id。

index.vue

<template>
  <div class="Router">
    Router
    <router-view></router-view>
  </div>
</template>

son1.vue

<template>
  <div>
    son1
    <router-link to="son2/20">toSon2</router-link>
  </div>
</template>

son2.vue

<template>
  <div>
    son2
    <router-link to="/router/son1">son1</router-link>
    {{componentId}}
    <button @click="toSon2"></button>
  </div>
</template>

<script>
export default {
  props:['id'],
  data() {
    return {
      componentId: this.$route.params.id
    }
  },
  mounted() {
    console.log('son2')
  },
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter');
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate');
    this.componentId = to.params.id
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave');
    next()
  },
  methods: {
    toSon2() {
      this.$router.push({
        path:'/router/son2/30'
      })
    }
  },
}
</script>

结论

重点在组件内的路由，好用的就是beforeRouteUpdate当发现组件重用跳转是不会发现生命周期再加载一遍。

总结

虽然官网很多知识我们在开发中从未使用到，但是当你阅读过知道了有这些东西的存在，当你需要使用的时候可以深入的研究。还有最后真的大家学习了要记得输出，敲敲小案例代码，加深自己的印象，在写写自己这个时间学习的心得，当下次需要时候查找出来会更加快速回到你之前理解的层度。