Vue routing is definitely a big part of VUE. Basically, there are two modes of routing: History mode and Hash mode. The most common one is history mode

  1. vue-router

    The hash mode used by default routes (http://localhost:8080/#/page1)

    • Start: Install the VUe-Router module

      npm install vue-router --save
Copy the code

    • Create router.js to configure the route

      import VueRouter from 'vue-router';
import Page1 from './components/Page1';
import Page2 from  './components/Page2';

export default new VueRouter({
    routes:[
        {path:'/page1'.component:Page1},
        {path:'/page2'.component:Page2},
    ]
})

Copy the code

    • Using the plug-in in main.js gives VUE the ability to control routing

      import VueRouter from 'vue-router';
import router from './routes';
Vue.use(VueRouter); // Mount this.$router to the prototype chain so that vue can handle routing
new Vue({
    router,
    render: h= > h(App),
}).$mount('#app');
Copy the code

    • Used in app.vue, using the router-view tag for placeholder

      <! -- Route placeholder --><router-view></router-view>
Copy the code

    • Button navigation,

      <router-link to="/page1" class="page1"> page1</router-link>
<router-link to="/page2" class="page2">Page 2</router-link>
Copy the code
    The history mode:

    The default route is hash mode. Use # after URL to locate the route, which is not good for SEO. Set history mode to use ordinary URL

    // configure mode directly in routes.js:
export default new VueRouter({
    mode:"history".routes:[
        {path:'/page1'.component:Page1},
        {path:'/page2'.component:Page2},
    ]
})

Copy the code
    Dynamic routing:

    In configuring the use of routes: id placeholder, similar to angualar, some parameters can be obtained using this.$route.XX

    export default new VueRouter({
    mode:"history".routes:[
        {path:'/page1'.component:Page1},
        {path:'/page2'.component:Page2},
        {path:'/page3/:id'.component:Page3},
    ]
})
// ---------
computed: {name(){
        return this.$route.params.id
    }
}
Copy the code

    It is more troublesome to obtain route parameters in this way. It is more elegant to obtain route parameters in the way of attribute passing

    export default new VueRouter({
    mode:"history".routes:[
        {path:'/page1'.component:Page1},
        {path:'/page2'.component:Page2},
        {path:'/page3/:id'.props:true.component:Page3}, // use props to represent attribute passing]})//------- is an elegant way to use props to receive
   props: ['id'].Copy the code
    Child routes are nested
    export default new VueRouter({
    mode:"history".routes:[
        {path:'/login'.component:Login},
        {
            path:'/dashboard'.component:DashBoard,
            children: [//--------- nested child routes
                {path:'/page1'.component:Page1},
                {path:'/page2'.component:Page2},
                {path:'/page3/:id'.props:true.component:Page3},
            ]
        },
    ]
})
//------------- use the first layer
  <div id="app">
    <h1>2019, a new day hello!!</h1>
    <hr>
    // Route placeholder
    <router-view></router-view><! </div> </div>//------------dashboard nesting
<template>
    <div>
        <div class="navbar">
            <router-link to="/page1" class="page1">Page 1</router-link>
            <router-link to="/page2" class="page2">Page 2</router-link>
            <router-link to="/page3/vuejs" class="page2">Vue</router-link>
        </div>
        <hr>
        <router-view></router-view> <! This is the second layer, where the child routes are nested.
    </div>
</template>
Copy the code
    Redirection of routes: Use the Redirect for redirection
    {path:'/'.redirect:'/login'},
Copy the code
    Route guard :(hooks before or after route jumps)hook
    let let routes = newVueRouter({ ... }) routes. BeforeEach ((to, from, next) = > {
    console.log('beforeEach',to); // To is to everything in that route
    if(to.path! = ='/login') {// The logic is that if it is not the login page, it will jump to the page, but if it is the login page, it will jump to the page after two seconds
        next()
    }else{
        setTimeout(() = >{
            next();
        },2000)}}); routes.afterEach((to,from) = >{
    console.log('afterEach');
});
export default routes

Copy the code
    Component internal lifecycle: The routing guard above is global, and our component has some internal lifecycle as well

    You need some internal guards for components, and there are two ways to do that

    • It is not recommended to configure path on routes

      export default new VueRouter({
    routes:[
        {path:'/page1'.component:Page1},
        {path:'/page2'.component:Page2},
    ]
})
Copy the code

    • Perform recommendations within the component

      Note the order in which the routing guard beforeEach ->beforeRouteEnter ->beforeRouteLeave->afterEach

      <script> export default {beforeRouteEnter(to,from,next){console.log('page3 entered '); next(); }, beforeRouteLeave(to,from,next){console.log('page3 is ready to exit '); If (window.confirm(' Are you sure you want to quit? ')){ next(); } }, } </script>Copy the code

    • When the route component is unchanged but the route parameter is changed, for example, from page3/vuejs to page3/react

      beforeRouteUpdate(to,form,next){
    console.log('page3 Route, but parameter changed ');
    next();
},
Copy the code
    The operation logic of the whole route, I understand, is the order of execution
    1. Navigation triggered
    2. Call the global beforeEach guard
    3. Call the beforeRouteUpdate guard in the reused component
    4. Call beforeEnter in the routing configuration. This is similar to beforeRouteEnter in the component
    5. Call beforeRouteEnter in the activated component.
    6. Call the global beforeResolve guard (2.5+). This is a little later than the global beforeEach guard
    7. Navigation confirmed.
    8. The component’s beforeRouteLeave
    9. Call the global afterEach hook.
    10. Trigger a DOM update.
    Asynchronous components, lazy loading

    It is very easy to work with Webpack in VUE. Import () directly from the routing configuration of components that require lazy loading.

    For example, make the login component lazy to load
{path:'/login'.component:() = >import('./components/Login')}
//{path:'/login',component:Login},
Copy the code