Vue nested route, route guard

Nested Route

Nested route: nesting other route configurations in one route configuration.

Nested routing is very common. For example, the navigation bar has four modules: homepage, article, idea and message. We integrate these modules in the form of nested routing. Click the corresponding entry in the navigation bar, and the corresponding page will be routed (the corresponding page will be displayed below), which is similar to the effect of html < iframe >.

 

 

demo nested route

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- Introduce vue.js -->
        <script src="js/vue.js"></script> 
        <!-- Introduce routing plug-in -->
        <script src="js/vue-router.js"></script>
    </head>
    <body>
        
    <div id="app"></div>
    
    <script>
        // Navigation
        var Nav={
            template:`
                <div>
                    <router-link :to="{name:'nav.index'}">home page</router-link>
                    <router-link :to="{name:'nav.article'}">Article</router-link>
                    <router-link :to="{name:'nav.idea'}">idea</router-link>
                    <router-link :to="{name:'nav.message'}">Leaving a message.</router-link>
                    <router-view></router-view>  <!-- Leave a pit, click the above 4 routing links, and the corresponding page will be displayed here -->
                </div>
            `,
        }
        
        // home page
        var Index={
            template:`
                <div>
                    <p>This is the front page</p>
                </div>
            `,
        }
        
        // Article
        var Article={
            template:`
                <div>
                    <p>This is the part of the article</p>
                </div>
            `,
        }
        
        // idea
        var Idea={
            template:`
                <div>
                    <p>This is the idea part</p>
                </div>
            `,
        }
            
        // Leaving a message.
        var Message={
            template:`
                <div>
                    <p>This is the message section</p>
                </div>
            `,
        }
            
            
        // Install routing plug-in
        Vue.use(VueRouter);
            
        // Create routing object
        var router=new VueRouter({
            // Configure routing rules
            routes:[ 
                {path:'/',name:'nav',component:Nav,children:[   //path Map directly to the root path (current html Page), children Configure routes to nest,Object array form
                    {path:'/index',name:'nav.index',component:Index},  //Nested routing name In general, you need to bring an external routing container inside to know the relationship at a glance
                    {path:'/article',name:'nav.article',component:Article},
                    {path:'/idea',name:'nav.idea',component:Idea},
                    {path:'/message',name:'nav.message',component:Message},
                    {path:'',name:'nav.index',component:Index},  //To click nav The corresponding link in will be routed to the specified page. We will configure a default routing page for it, path:''
                ]},
            ]
        });
            
        new Vue({
            el:'#app',
            router,  //Using routing
            template:`
                <div>
                    <router-view></router-view>  <!-- Leave to nav Pit position -->
                </div>
            `,
        })
    
    </script>        
        
    </body>
</html>

 

 

The path of nested route can use relative path or absolute path

    {path:'/nav',name:'nav',component:Nav,children:[   
           {path:'/index',name:'nav.index',component:Index}  //Absolute path
    ]}

/Represents the root path (the current html page). The access path of index is..... html ා / index

 

    {path:'/nav',name:'nav',component:Nav,children:[   
           {path:'index',name:'nav.index',component:Index}  //Relative path, relative to external route
    ]}

The access path of index is

 

 

 

 

 

Routing guard

When one page is routed to another page, some processing can be done before it is routed to the target page, such as login detection and permission check. If it is not satisfied, it will not be routed to the target page, and a prompt message will be given.

 

demo route guard

    // Install routing plug-in
    Vue.use(VueRouter);
        
    // Create routing object
    var router=new VueRouter({
        // Configure routing rules
        routes:[ 
            //.....
        ]
    });
        
    new Vue({
        el:'#app',
        template:`
            <div>
                <router-view></router-view>  <!-- Retention pit -->
            </div>
        `,
        router,
        data(){
            return{
                //......
            }
        },
        mounted(){
            router.beforeEach( (to,from)=>{   //Route guard. Use the arrow function of ES6 to do some preprocessing. The two parameters encapsulate the information of the target page and the previous page respectively
                //......
            });
        },
        
    })

The router guard should be written in new Vue() of html page, generally in mounted() {}.

The previous page needs to transfer data to the target page, such as username, uid, loginstate, role and so on. You can save these data with some variables in the data, and the routing guard can perform login detection and permission detection according to these data.

When you execute mouted(), the data has been mounted, and you can get the data. The router guard can get the data for detection.

Before each, as the name implies, every time a route is routed to the target page, it will be detected by the route guard.

 

Now many applications are in mvc mode. Interceptors and filters in the controller have filtered requests for a long time. Login detection and permission check have been done. There is no need to use routing guards to filter in the view.

Route guards are rarely used. Just understand.

Tags: Javascript Vue

Posted on Sat, 04 Apr 2020 16:06:45 -0700 by efron