Use of Vue router router

1, router global configuration

1. Install routing

    npm install vue-router
   

2. Create router
   Usually, for projects created with Vue cli, if we don't import router at first, we need to create it manually. At this time, we create router directory in src directory and index in directory JS, as follows:

   /**
   * Router object module
   */
   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   // Declare the use of Vue router plug-in
   /**
   *  Two component labels (router link / router view) are defined and registered internally,
   *  Two properties are added to the component object:
   *  1. $router: Router, you can use this$ Router access router
   *  2. $route: For the current route, you can use this$ Route access current route
   */
   Vue.use(VueRouter)
   
   export default new VueRouter ({
    // Register all routes in the application
    routes: [
    ]
   })
   

   Then in the entry file main Add configuration to JS:

   /**
    * Entrance JS
    */
   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'
   
   
   new Vue({
     el: '#app',
     components: {App}, // Mapping component labels
     template: '<App/>', // Specifies the template that needs to be rendered to the page
     router  // Register the router. The name here is fixed. If the import ed name is another name (myRouter), it needs to be mapped here, such as router: myRouter
   })
   

   So far, the global configuration is completed. Let's configure the basic route.

2, Basic routing

Three steps to write a route:

1. Define routing components
2. Route mapping
3. Write two labels for routing

   <router-link to=""></router-link>
   <router-view></router-view>
   

In router / index JS file defines our own route, which is as follows:

/**
 * Router object module
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

// Declare the use of Vue router plug-in
Vue.use(VueRouter)

export default new VueRouter ({
  // Register all routes in the application
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

After defining the route, click home Routes used in Vue:

<template>
  <div>
    <h2>Home</h2>
    <div>
      <ul class="nav nav-tabs">
        <li><router-link to="/home/news">News</router-link></li>
        <li><router-link to="/home/message">Message</router-link></li>
      </ul>
	  <!-- Area used to display content -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {}
</script>

<style>

</style>

3, Nested routing – children

Let's take a look at nested routing, that is, there are sub routes inside the component.
Note that the "/" on the left side of the path always represents the root path. Take a closer look at the following sub route writing:

/**
 * Router object module
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import MessageDetail from '../pages/MessageDetail.vue'

// Declare the use of Vue router plug-in
Vue.use(VueRouter)

export default new VueRouter ({
  // Register all routes in the application
  routes: [
    {
      path: '/',
      redirect: '/about'
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home/news',
          component: News
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              path:'detail/:id',
              component: MessageDetail
            }
          ]
        },
        {
          path: '',
          redirect: '/home/news'
        }
      ]
    }
  ]
})

In the html code fragment of the basic route above, the corresponding sub route jump has been written out.

4, Routing component transfer data – $route

At the same time of route jump, we need to add parameters to the corresponding route. At this time, we can write as follows:

1. When defining a route, use the params placeholder:

   path: '/home/news/detail/:id',
   component: NewsDetail
   

   Then, when using the tag, pass the corresponding parameters:

   <router-link :to="'/home/news/detail/${news.id}'"></router-link>
   

   You can use $route params. ID to obtain parameters. The specific parameters you can obtain can be viewed through the vue tool of the browser.

2. Use $route Query to pass parameters
   It's similar to param, but it doesn't need to occupy the position on the path. In addition, in router link, it should be written as follows:

   <router-link :to="'/home/news/detail?id=${news.id}'"></router-link>
   

3. Routing using router view

   <router-view :msg="id"></router-view>
   

   Declare props in the sub component to receive:

   prop: {
    msg: Srting
   }
   

5, Cache routing component – keep alive

When the route jumps, the data state of the current route is saved. When the current route is returned, the state still exists.

<keep-alive>
  <router-view></router-view>
</keep-alive>

6, Routing programming navigation – $router

Programmed navigation of routing    

this.$router.push(path): It's equivalent to clicking the routing link(You can return to the current routing interface)
this.$router.replace(path): Replace current route with new route(Cannot return to the current routing interface)
this.$router.back(): request(return)Last record route