Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

preface

I haven’t really read the official website of vue-Router after using it for so long. Here’s something I didn’t even know I knew.

content

The directory structure

Embedded routines by

The router file

{
    path: "/router".redirect: "/router/son1".// When the child under a route is the path containing the parent in the path
    component: () = > import('.. /views/Router/index.vue'),
    children: [{path: "son1".component: () = > import('.. /views/Router/son1.vue')}, {path: "son2".component: () = > import('.. /views/Router/son2.vue')}}]Copy the code

This is not the complete file code.

index.vue

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

son1

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

son2

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

conclusion

When we render SON1, we replace the router-view in index.vue with son1 code, and when we jump to SON2 we change it to SON2 code.

Named view

The router file

{
    path: "/router".redirect: "/router/son1".component: () = > import('.. /views/Router/index.vue'),
    children: [{path: "son1".components: {// Notice the s here
          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')}}]Copy the code

Router-viewname equals header, and so on. If the router-view does not define a name, it corresponds to 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>
Copy the code

Route component parameters are transmitted

router.js

{
    path: "/router".redirect: "/router/son1".component: () = > import('.. /views/Router/index.vue'),
    children: [{path: "son1".components: {// Notice the s here
          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 / / key}}]Copy the code

son1

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

son2

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

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

conclusion

This.$route.params.id = props ().props: true ().props: true ()

Routing guard

Basic knowledge of

Front guard and rear guard are not mentioned

Intra-component routing

The name of the routing function is written inside the component.

• beforeRouteEnterYou cannot use this to enter components
• beforeRouteUpdateComponent updates for example: conversions with id 20->30 above can use this
• beforeRouteLeaveTo leave the component, use 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".// Pay attention to the id
        component: () = > import('.. /views/Router/son2.vue'),
        props: true}}]Copy the code

Note id in this file.

index.vue

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

son1.vue

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

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>
Copy the code

conclusion

The emphasis is on routing within a component, and beforeRouteUpdate is useful when a component reuse jump is detected so that the lifecycle is not reloaded.

conclusion

Although there is a lot of knowledge on the website that we have never used in our development, you can delve into it when you read about it and know that it exists. Finally, we learned to remember the output, knock on the small case code, deepen their own impression, in writing their own learning experience at this time, the next time when you need to find out will be more quickly back to your previous understanding of the level.