preface

Vue Router is a path manager for single-page applications. It is the official routing plug-in of vue. js, which is deeply integrated with vue. js. Routing is used to set access paths and map paths to components. In a single page application, switching between pages is a process of switching between paths. The essence of routing module is to establish the mapping between URL and page.

rendering

Importing routes on the home page

The <router-view/> is the top-level exit that renders the components to which the highest-level routes are matched

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> <! -- <router-link to="/about">About</router-link> -->
      <router-link :to="{name:'about',params:{user:'xiaoming'}}">about</router-link>
    </div>
    <button @click="clickBtn"</button> <router-view/> </div> </template> <script>export default {
  methods:{
    clickBtn(){
      this.$router.push('/about');
      setTimeout(()=>{
        this.$router.go(-1); }, 1000);setTimeout(()=>{
        this.$router.replace('/ 404'); }, 2000); } } } </script> <style>#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
  margin-right:10px;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Copy the code

Routing matching

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '.. /views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home', Component: Home, // Separate route guard beforeEach: to,from,next =>{console.log(to,from); next(); } }, { path:'/about/:user',
    name: 'about', // Routing meta meta:{isNeedLogin:true
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about"* /'.. /views/About.vue'), // Nested routines are implemented by (if the left menu bar, the right menu bar's children page).'detail',
        component:()=> import('.. /views/AboutDetail.vue')
      }
    ]  
  },
  {
    path:The '*',
    name:'404',
    component:()=>import('.. /views/404.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
Copy the code

Need knowledge

1. Dynamic routing matching mode; 2. Meta routing information is configured with meta; 3. Nested routines are implemented with children configuration;

{
    path: '/about/:user',
    name: 'about', // Routing meta meta:{isNeedLogin:true
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about"* /'.. /views/About.vue'), // Nested routines are implemented by (if the left menu bar, the right menu bar's children page).'detail',
        component:()=> import('.. /views/AboutDetail.vue')}}],Copy the code

4. Route parameter transfer, get with query transfer, POST with params transfer; 5, Route guard, front hook and post hook, combined with meta how to use, for example, meta configures whether login information is required, in the global route guard front hook can be handled in this way; In general, some validation processing is done in the front hook of route guard.

BeforeEach ((to,from,next)=>{beforeEach(to,from,next)=>{if(to.meta.isNeedLogin){
    next({
      path:'/login',
      query:{
        name:'aaa'
      }
    })
  }
  next();
});
Copy the code