1, Import package

Note: the imported package should be under vue

  <title>Use of basic routes</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>

2, Create subcomponents

Note: it is created on the vm instance

    var login = {
        template: '<h3>This is the login sub component. This component was developed by Benbo ba.</h3>'
    }
    var register = {
        template: '<h3>This is the registration sub component. This component was developed by Babo Benz.</h3>'
    }

3, Create a routing object

Create a routing object. After the package is imported, there is a routing constructor - VueRouter in the window global object. When the new routing object is used, a configuration object can be passed for the constructor.

Note 1: the route in this configuration object represents the route matching rules. Each route rule is an object, and this rule object has two necessary attributes
**1.**path, indicating which route link address to listen to
**2.**component, which indicates the component corresponding to the component property if the route is the path matched previously
**Note 2: the attribute value of * * component must be a template object of a component, not a reference name of a component

    var router = new VueRouter({
        routes: [ //Array of routing rules
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })

4, Create Vue instance to get ViewModel

Register the routing rule object to the vm instance to listen for url address changes and display the corresponding components
Law 1:

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });

Law two:

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router
    });

5, Import container in page

The elements provided by VueRouter are used as placeholders and displayed by the components matched by routing rules.

  <div id="app">
        <router-link to="/login">Sign in</router-link>
        <router-link to="/register">register</router-link>

        <router-view></router-view>
  </div>

**Note: * * router link is similar to a tag by default

You can use tag to modify

  <div id="app">
        <router-link to="/login" tag="span">Sign in</router-link>
        <router-link to="/register">register</router-link>

        <router-view></router-view>
  </div>

Final page results:

6, Redirection settings initial page

   var router = new VueRouter({
        routes: [ //Array of routing rules
            {path: '/',redirect:'/login'},
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
      // linkActiveClass: 'myactive' / / class related to activation
    })

Result:
The open page is the login we set, including the navigation bar address

7, Style routes

    var router = new VueRouter({
        routes: [ //Array of routing rules
            {path: '/',redirect:'/login'},
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
       linkActiveClass: 'myactive' // Classes related to activation
    })

      .router-link-active,
      .myactive {
      color: red;
      font-weight: 800;
      font-style: italic;
      font-size: 80px;
      text-decoration: underline;
      background-color: green;
    }

The results are as follows: