A super detailed Vue-Router step-by-step tutorial

I've been reviewing the whole vue family recently. I feel that I remember it more deeply after reading it again, so I made a special record of it (the vue-router version in this article is v3.x).

1. router-view

<router-view> is a functional component used to render view components matched by the path. Can be used with <transition> and <keep-alive>. If you use both together, make sure to use <keep-alive> inside.

<router-view></router-view>
<!--OR-->
<router-view name="footer"></router-view>

If a name is set for <router-view>, the corresponding component under components in the corresponding routing configuration will be rendered.

2. router-link

The <router-link> tag supports user (click) navigation in applications with routing capabilities.

<router-link :to="{ path: '/login'}" replace tag="span"></router-link>

3. Redirect

The root route redirects to login

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' }
  ]
})

Dynamically return redirect target

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // Method receives the target route as a parameter // return the redirected string path/path object }}
  ]
})

4. Routing alias

When the route accesses /b, the URL will remain /b, but the route match will be /a

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

5. Routing props

Use props to avoid over-coupling with $route, so that you can use props to receive parameters directly in the component

5.1, Boolean mode

Write the parameters after the route and set props to true

{
 path: '/vuex/:id',
 name: 'Vuex',
 component: () => import('@/view/vuex'),
 props: true,
 mate:
  title: 'vuex'
 }
}

Set the parameters params that need to be passed to jump

<router-link :to="{name:'Vuex', params: {id: '99999'}}" tag="h1">Jump</router-link>
<!--OR-->
toNext() {
    this.$router.push({
     name: 'Vuex',
     params: {
      id: '99999'
     }
    })
}

On the page you jump to, use props or this.$params to get parameters

props: {
 id: {
  type: String,
  default: ''
 }
}
<!--OR-->
this.$params.id

5.2 Object Mode

Set props as an object in the route to carry static data

{
 path: '/vuex',
 name: 'Vuex',
 component: () => import('@/view/vuex'),
 props: {
  id: '99999'
 },
 mate:
  title: 'vuex'
 }
}

Jump

<router-link :to="{name:'Vuex'}" tag="h1">Jump</router-link>
<!--OR-->
toNext() {
 this.$router.push({
  name: 'Vuex'
 })
}

On the page you jump to, use props or this.$params to get parameters

props: {
 id: {
  type: String,
  default: ''
 }
}
<!--OR-->
this.$params.id

Note: Only applicable to static data

5.3, Function Mode

First set props to Function in the route and return an object. Whether it is query or params, it can be converted to props.

{
 path: '/vuex',
 name: 'Vuex',
 component: () => import('@/view/vuex'),
 props: route => ({
     <!--query-->
  id: route.query.id,
  <!--params-->
  age: route.params.age
 }),
 mate:
  title: 'vuex'
 }
}

Jump

<router-link :to="{name:'Vuex',query: {id: '99999'}, params:{age:'20'}}" tag="h1">Jump</router-link>
<!--OR-->
toNext() {
 this.$router.push({
  name: 'Vuex',
  query: {
   id: '999999'
  },
  params: {
   age: '20'
  }
 })
}

In the page you jump to, get the parameters through props or this.$route.params / this.$route.query

props: {
 id: {
  type: String,
  default: ''
 },
 age: {
  type: String,
  default: ''
 }
}
<!--OR-->
this.$route.query
this.$route.params

6. Routing Guard

Route guards are mainly used to guard navigation by redirecting or canceling.

6.1, Global Pre-Guard beforeEach

When a navigation is triggered, global before guards are called in the order they were created. Guards are parsed and executed asynchronously, and the navigation is waiting until all guards are parsed.

The usage of next is as follows

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

6.2, Global Resolution Guard beforeResolve

New in 2.5.0, similar to beforeEach, except that the parsing guard is called before navigation is confirmed and after all guards in the component and asynchronous routing components are parsed.

router.eforeResolve((to, from, next) => {
  // ...
})

6.3, Global post-hook afterEach

The post guard will not accept the next function and will not change the navigation itself.

router.afterEach((to, from) => {
  // ...
})

6.4, Router exclusive guard beforeEnter

You can define your own beforeEnter guard directly in the route configuration, with the same method parameters as the global before guard.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

6.5, Guards within components

• beforeRouteEnter
  

The guard cannot access this because the guard is called before the navigation is confirmed, so the new component that is about to appear has not yet been created. You can access the component instance by passing a callback to next. The callback is executed when the navigation is confirmed, and the component instance is used as the parameter of the callback method.

const Footer = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    next(vm => {
        // Access the component instance via `vm`})
  }
}

• beforeRouteUpdate (new in 2.2)
  

Called when the current route changes but the component is reused, you can access the component instance this.

const Foo = {
  template: `...`,
  beforeRouteUpdate(to, from, next) {
    this.name = to.params.name
    next()
  }
}

• beforeRouteLeave
  

Called when navigating away from the corresponding route of this component, usually used to prevent users from leaving suddenly before saving changes. Can be canceled by calling next(false).

const Foo = {
  template: `...`,
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Are you sure you want to leave?')
    if (answer) {
        next()
    } else {
        next(false)
    }
  }
}

6.6, Complete navigation analysis process

1. Navigation is triggered.
2. Call the beforeRouteLeave guard in the deactivated component.
3. Calls the global beforeEach guard.
4. Call beforeRouteUpdate guards in reused components (2.2+).
5. Call beforeEnter in the routing configuration.
6. Resolve asynchronous routing components.
7. Call beforeRouteEnter in the activated component.
8. Calls the global beforeResolve guard (2.5+).
9. Navigation confirmed.
10. Call the global afterEach hook.
11. Triggers a DOM update.
12. Call the callback function passed to next in the beforeRouteEnter guard, and the created component instance will be passed in as a parameter of the callback function.
    

7. Routing Meta Information

When defining routes, you can configure the meta object field to store information corresponding to each route. Access it via this.$route.meta, or via to.meta and from.meta in route guards.

const router = new VueRouter({
  routes: [
    {
  path: '/index',
  name: 'Index',
  component: () => import('@/view/index'),
  meta: {
   title: 'Homepage',
   rolu: ['admin', 'boss']
  }
 }
  ]
})

8. Transition effects

Just wrap the router-view tag with the transition tag. You can define the animation effect yourself. Refer to the usage of the transition component. You can also use watch in the parent component or app.js to listen to $route changes, replace the name attribute of the transition component according to different routes, and achieve different animation effects.

<transition :name="transitionName">
  <router-view></router-view>
</transition>

monitor

watch:
  '$route' (to, from) {
    const toD = to.path.split('/').length
    const fromD = from.path.split('/').length
    this.transitionName = toD < fromD ? 'slide-right' : 'slide-left'
  }
}

9. Scrolling Behavior

When creating a Router instance, you can provide a scrollBehavior method and receive to and from route objects. The third parameter, savedPosition, is only available when triggered by the browser's forward/back buttons.

const router = new VueRouter({
 mode: 'hash',
 routes,
 scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
   return new Promise((resolve, reject) => {
    setTimeout(() => {
     resolve(savedPosition)
    }, 1000)
   })
  } else {
   return { x: 0, y: 0 }
  }
 }
})

10. Complete routing configuration

First import Vue and vue-router, then use router to define a set of routing information. Each route is an object with the following properties:

The specific code is as follows:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
 {
  path: '/',
  redirect: '/index'
 },
 {
  path: '/index',
  name: 'Index',
  component: () => import(/* webpackChunkName: "index" */ '@/view/index'),
  mate:
   title: 'Homepage',
   auth: false
  }
 },
 {
  path: '/login',
  name: 'Login',
  component: () => import(/* webpackChunkName: "login" */ '@/view/login'),
  meta: {
   title: 'Login',
   auth: false
  },
  children: [
   {
    path: 'children',
    name: 'Children',
    component: () => import(/* webpackChunkName: "children" */ '@/view/children'),
    mate:
     title: 'Nested subroutes',
     auth: false
    }
   }
  ]
 }
]

const router = new VueRouter({
 mode: 'hash',
 routes
})

export default router

Note: Nested subroutes must be placed in the nested page <router-view> tag.

Summarize

This is the end of this article about the Vue-Router tutorial. For more relevant Vue-Router step-by-step tutorial content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!