Vue Router is the official route manager for vue.js, making it a piece of work to build single-page applications.

The basic use

  • The Vue Router provides components for routing Settings<router-link> 与 <router-view>.
  • Define the components needed in the route
  • Set routing rules.
  • Create a Vue Router instance and configure routes using the Routes attribute.
  • Create a Vue instance and inject routes using the Router attribute.
<div id="app">
    <! -- Set the component used for routing operations -->
    <router-link to="/">Home page</router-link>
    <router-link to="/user">The user</router-link>
    <router-link to="/category">classification</router-link>

    <! -- Display the corresponding view according to the routing rule -->
    <router-view></router-view>
</div>

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script>
    // Set the component
    var Index = {
      template: '
       

         Home page function 
       
'
    };
    var User = {
      template: '
       

         User function 
       
'
    };
    var Category = {
      template: '
       

         classification function 
       
'
    };

    // Define routing rules
    var routes = [
      { path: '/'.component: Index },
      { path: '/user'.component: User },
      { path: '/category'.component: Category }
    ];

    // Create a Vue Router instance
    var router = new VueRouter({
      routes : routes
    });

    // Create a Vue instance and inject the router
    var vm = new Vue({
      el: '#app'.router: router
    });

    
</script>
Copy the code

Named view

  • If, after navigation, you want to display multiple views (components) at the same level, you need to name the view.
  • The components property is used to set the corresponding components of different views in the route.
<div id="app">
    <router-link to="/">Home page</router-link>
    <router-link to="/user">The user</router-link>

    <router-view name="sidebar"></router-view>
    <! -- router-view default router-view default-->
    <router-view></router-view>
</div>

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script>
    var SideBar1 = {
      template: '
       

         sidebar 1 function 
       
'
    };

    var SideBar2 = {
      template: The '
       

         sidebar 2 function 
       
'
    };

    var Index = {
      template: '
       

         Home page function 
       
'
    };

    var User = {
      template: '
       

         User function 
       
'
    };

    // Define routing rules
    var routes = [
      {
        path: '/'.components: {
          // Router-view name: component configuration object
          default: Index,
          sidebar: SideBar1
        }
      },
      {
        path: '/user'.components: {
          default: User,
          sidebar: SideBar2
        }
      }
    ];

    // Create a Vue Router instance
    var router = new VueRouter({
      routes
    });

    // Create a Vue instance
    new Vue({
      el: '#app',
      router
    });
</script>
Copy the code

Dynamic routing

  • When we need to map a certain type of URL to the same component, we need to use dynamic routing.
  • Part of a path is used when defining routing rules:You can set it as a dynamic route.
  • After the dynamic route is set to dynamic, any content in the dynamic part redirects to the same component.
  • The information corresponding to the: part is called path parameters and is stored in vm.$route.params.
<div id="app">
    <router-link to="/user/1">User 1</router-link>
    <router-link to="/user/2">The user 2</router-link>
    <router-link to="/user/3">The user 3</router-link>

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

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script>
    // Set the component
    var User = {
      template: '
       

         this is the function of user {{$route.params.id}} 
       

    };

    // Set routing rules
    var routes = [
      {
        path: '/user/:id'.component: User
      }
    ];

    var router = new VueRouter({ routes });
    var vm = new Vue({
      el: '#app',
      router
    });
</script>
Copy the code

Listening route parameter

To respond to route parameter changes, watch can listen for $route.

// Set the component
var User = {
  template: '
      

        This is the function of user {{$route.params.id}} 
        
      
'.watch: {
    $route (route) {
      console.log(route.params.id)
    }
  }
};
Copy the code

Route parameter transmission processing

Here the data is set up through the props of the route and received through the component props.

// The configuration object of the component
var Category = {
  props: ['id'].template: This is the classification {{id}} function  '
};

// Set routing rules
var routes = [
  {
    path: '/category/:id'.component: Category,
    props: true}];Copy the code

Other Settings

When you have multiple named views, you need to set the props of the route as the object. If you want to set static data, set an option corresponding to a component in props as an object, and the internal properties are bound to the component’s props.

<router-view></router-view>
<router-view name="sidebar"></router-view>
<router-view name="sidebar2"></router-view>


// The configuration object of the component
var Category = {
  props: ['id'].template: This is the classification {{id}} function  '
};

var SideBar = {
  template: '
      

        sidebar function 
      
'
};

var SideBar2 = {
  props: ['a'.'b'].template: '
      

        sidebar 2 features: {{a}} {{b}} 
      
'
};

// Set routing rules
var routes = [
  {
    path: '/category/:id'.components: {
      default: Category,
      sidebar: SideBar,
      sidebar2: SideBar2
    },
    props: {
      // Data needs to be passed
      default: true.// There is no need to pass data
      sidebar: false.// Pass static data
      sidebar2: {
        a: State of '1'.b: '2'}}}];Copy the code

Embedded routines by

  • In actual scenarios, routes are usually composed of multi-layer nested components. In this case, you need to configure routes using nested routines.
  • Use children to set child routes in nested routines.
<div id="app">
    <router-link to="/user">User functionality</router-link>
    <router-view></router-view>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
<script>// component var User = {template: '<div>
          <h3>This is what the User component does</h3>
          <router-link to="/user/hobby">Hobby function</router-link>
          <router-link to="/user/info">The user information</router-link>
          <router-view></router-view>
        </div>`}; var UserHobby = { template: `<div>UserHobby components</div>`}; var UserInfo = { template: `<div>The UserInfo components<router-link to="/user/info/school">School of information</router-link>
          <router-view></router-view>
        </div>`}; var UserInfoSchool = { template: `<div>UserInfoSchool components</div>`}; Var routes = [{path: '/user', Component: user, children: [{path: 'hobby', Component: UserHobby}, {path: 'info', component: UserInfo, children: [ { path: 'school', component: UserInfoSchool }, ] } ] } ]; Var router = new VueRouter({routes}); var vm = new Vue({ el: '#app', router });</script>
Copy the code

Programmatic navigation

Programmatic navigation refers to setting up navigation through methods.

  • Router.push () is used to navigate to a new URL.
vm.$router.push('/user');
vm.$router.push({path: '/user'});
vm.$router.push({path: '/user/123'});
Copy the code


  • <router-link>The to property can also attribute an object structure when bound.
<div id="app"> <! Declarative navigation --> <! --<router-link to="/user/200">The user 200</router-link>-- > <! Programmatic navigation --><router-link :to="{ path: '/user/700' }">The user 700</router-link>

    <router-view></router-view>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
<script>
    var User = {
      template: This is the user {{$route.params.id}}  '
    };

    var routes = [
      {
        path: '/user/:id'.component: User
      }
    ];

    var router = new VueRouter({ routes });
    var vm = new Vue({
      el: '#app',
      router
    });
</script>
Copy the code

After routing

  • Add the name attribute when setting the route.
  • In push(), the route is navigated by name and the parameters are set by params.
  • Can also be<router-link>The use of.
<div id="app">
    <router-link :to="{ name: 'school', params: { id: 10 } }">School 10</router-link>

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

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script>
    var School = {
      template: {{$route.params}}
    };

    var routes = [
      {
        path: '/user/:id/info/school'.name: 'school'.component: School
      }
    ];

    var router = new VueRouter({ routes });
    var vm = new Vue({
      el: '#app',
      router
    });
    
</script>
Copy the code
vm.$router.push({ name: 'school'.params: { id: 10}});Copy the code

redirect

When a user accesses a URL, the user is redirected to another specified URL

<div id="app">
    <router-link to="/">Home page</router-link>
    <router-link to="/category/2">Category 2</router-link>
    <router-link to="/category"> /category </router-link>

    <router-view></router-view>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
<script>
    var Index = {
      template: '
        

          Home page function 
        
'
    };

    var Category = {
      template: {{$route.params.id}} Function  '
    };

    var router = new VueRouter({
      routes: [{path: '/'.component: Index
        },
        {
          path: '/category/:id'.component: Category
        },
        {
          path: '/category'.// Redirect to '/'
          redirect: '/'}}]);var vm = new Vue({
      el: '#app',
      router
    });
</script>
Copy the code

The alias

Used to simplify the url content displayed

<div id="app">
    <router-link :to="{ name: 'school', params: { id: 10, date: '0612'} }">School of information</router-link>
    <router-link to=20/1234 "/">School Information 2</router-link>
    <router-view></router-view>
</div>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script>
    / / component
    var School = {
      template: '
        

         School component 
        

    };

    // Routing rules
    var router = new VueRouter({
      routes: [{path: '/user/:id/info/school/:date'.name: 'school'.component: School,
          // equivalent to path
          alias: '/:id/:date'}}]);var vm = new Vue({
      el: '#app',
      router
    });
</script>
Copy the code

Navigation guard

Used to determine whether an address can be accessed

<div id="app">
    <router-link to="/">Home page</router-link>
    <router-link to="/user">The user</router-link>
    <router-link to="/category">classification</router-link>
    <router-view></router-view>
</div>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script>
    var Index = {
      template: '
        

          This is the home page function 
        
'
    };
    var User = {
      template: '
        

          This is the user function 
        

    };
    var Category = {
      template: '
        

          This is the classification function 
        
'
    };

    var router = new VueRouter({
      routes: [{path: '/'.component: Index },
        { path: '/user'.component: User },
        { path: '/category'.component: Category },
      ]
    });

    // Set the navigation guard
    router.beforeEach(function (to, from, next) {
      
      // Jumps to /category when you need to access /user
      if (to.path === '/user') {
        next('/category');
      } else{ next(); }});var vm = new Vue({
      el: '#app',
      router
    })
  </script>
Copy the code

The history mode

This needs to be set using the mode option of the Vue Router instance, so that the URL is more beautiful, but also requires backend support to avoid problems.

<div id="app">
    <router-link to="/">Home page</router-link>
    <router-link to="/user">The user</router-link>
    <router-link to="/category">classification</router-link>
    <router-view></router-view>
</div>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script>
    var Index = {
      template: '
        

          This is the home page function 
        
'
    };
    var User = {
      template: '
        

          This is the user function 
        

    };
    var Category = {
      template: '
        

          This is the classification function 
        
'
    };

    var router = new VueRouter({
      mode: 'history'.routes: [{path: '/'.component: Index },
        { path: '/user'.component: User },
        { path: '/category'.component: Category },
      ]
    });

    var vm = new Vue({
      el: '#app',
      router
    })
</script>
Copy the code