1, Basic use of Vue Router

1. Install Vue router plug-in

npm install vue-router --save

Link: Vue Router documentation

2. Create routing instance

import Vue from 'vue'
import VueRouter from 'vue-router'
import listTemplate from '@/view/demo/listTemplate.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/demo',
    component: listTemplate
  }
]

const router = new VueRouter({
  routes
})

export default router

3. Mount to Vue instance

import Vue from 'vue'
import App from './App'
import router from '@/router/index'
Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  router,
  template: '<App/>'
})

4. Use routing

2, Basic advanced of Vue Router

1. Dynamic route matching

All routes that match a pattern are mapped to the same component.

const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { path: '/user/:id', component: User }
  ]
})

A path parameter is marked with a colon:. When a route is matched, the parameter value will be set to this$ route. Params, which can be used within the User component.

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

be careful:
When using routing parameters, such as navigating from / user/foo to / user/bar, the original component instance will be reused, but the component life cycle hook will not be called again.
To respond to changes in routing parameters, use the watch $route Object:

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // Responding to routing changes
    }
  }
}

2. Capture all routes or 404 Not found routes

Route {path: '*'} is usually used for client 404 errors. When wildcard routes are used, routes containing wildcards should be placed last.

{
  // All paths will be matched
  path: '*'
}
{
  // Will match any path starting with ` / user - '
  path: '/user-*'
}

be careful:
The earlier a route is defined, the higher the priority.

3. Named route

A route is identified by a name

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

4. Named view

If the router view has no name set, it defaults to default.

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

A view is rendered using one component, so multiple views require multiple components for the same route. Ensure that the components configuration is used correctly (with s):

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

5. Redirect

Redirect from / a to / b

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

6. Alias

When the user accesses / b, the URL will remain / b, but the route matching will be / a, just as the user accesses / a.

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

7. Routing component parameters

Decoupling by props

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // For routes containing named views, you must add the 'props' option for each named view:
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

explain:
If props is set to true, route Params will be set as the component property

8. HTML5 History mode

(1) Vue router default hash mode (with # sign in url):
The window can listen to the change of hash value (onhashmage event). When the hash value in the URL changes, there is no need to send an http request to the server. The window can listen to this change and load the front-end code block as needed. Routing distribution does not need to be done by the server. The front end can complete it by itself. So when the URL changes, the page will not reload.

(2) history mode of route (without # number in url):
The traditional routing distribution mode is used, that is, when the user enters a url, the server accepts the user's input request, parses the path of the url, and then makes the corresponding logical processing.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})