Nested routing
Nested routes: Route a nested configuration other routing configuration.
Nested routing very common, such as navigation bars have Home, articles, ideas, comments, four modules, we integrate these modules in the form of a nested route, click on the corresponding entry in the navigation bar, they will be routed to the corresponding page ( below displays the corresponding pages), and the html <iframe> similar results.
Nested routing demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> <!-- 引入路由插件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="app"></div> <script> // 导航 var Nav={ template:` <div> <router-link :to="{name:'nav.index'}">首页</router-link> <router-link :to="{name:'nav.article'}">文章</router-link> <router-link :to="{name:'nav.idea'}">Ideas < / Router-Link> < Router - Link: to = " {name: 'nav.message'} " > message < / Router-Link> < Router - View > < / Router-View> <- left pit! , clicking on the routing links 4, the corresponding page is displayed here -> < / div> `, } // First var Index = { Template:` < div > < P > this is part Home < / P> </div> `, } // article var Article This article was = { Template:` < div > < P > This is the part of the article < / P> < / div> `, } // idea var Idea = { Template:` < div > < the p- > this is part of the idea < / p> < / div> `, } // message var the Message = { Template: ` < div > < P > This is a message part < / P> < / div> `, } // installation route widget Vue.use (VueRouter); // Create routing object var Router = new new VueRouter ({ // configure routing rule routes: [ {path: ' / ' , name: ' NAV ' , Component: Nav, Children: [ @path mapped directly to the root (the current html page) lower, arranged to nest Children route, in the form of an array of objects {path: ' / index ' , name: ' nav.index ' , Component: Index}, // nested in the name of the route are generally required to bring the container external route, to see that the relationship {path: ' / Article This article was ' , name: ' nav.article ' , Component: Article This article was}, {path: ' / IDEA ' , name : ' nav.idea ' , Component: Idea}, {path: ' / Message ' , name: ' nav.message ', the Component: the Message}, {path: '' , name: ' nav.index ' , the Component: Index}, // to click on the link will nav route corresponding to a specific page, we give it a default route configuration page , path: '' ]}, ] }); new new Vue ({ EL: ' #app ' , Router, using routing // Template: ` < div > < Router - View > < / Router-View> <-! left nav pit bits -> < / div> `, }) </script> </body> </html>
Nested routing path may use a relative path, an absolute path can also be used
{path:'/nav',name:'nav',component:Nav,children:[
{path:'/index',name:'nav.index',component:Index} //绝对路径
]}
/ Represents the root path (current html page). Access path index is ..... html # / index
{ Path: '/ NAV' , name: 'NAV', Component: Nav, Children: [
{ path: 'index' , name: 'nav.index', Component:} // Index relative path with respect to external routes
] }
Access path index is .... html # / nav / index
Routing guard
Routing a page to another page, before the route can do some processing to the target page, such as login detection, permission checks, not satisfied is not routed to the destination page, prompt information.
demo routing guard
// installation route widget Vue.use (VueRouter); // Create routing object var Router = new new VueRouter ({ // Configure routing rule routes: [ @ ..... ] }); new new Vue ({ EL: ' #app ' , Template: ` <div> <! - left pit -> <Router-View> </ Router-View> </ div> `, Router, Data () { return { // .... .. } }, Mounted () { router.beforeEach ((to, from) => {// guard route. Use the arrow ES6 do some processing function parameters before .2 encapsulate the target page, the information on a page // ...... } ); } })
Routing guard in html page write new Vue (), usually written in the mouted () {} in.
On a page you want to pass data to the target page, such as username, uid, loginstate, what role can save the data in the data using a number of variables, routing guard log detected on the basis of these data, the authority to detect.
When performing the mrouted (), the data has been mounted, the data can be acquired, the routing data detected guard can get it.
beforeEach, as the name implies, each time the route to the destination page will be detected using the routing guard.
Now a lot of applications are mvc mode, controller there blocker, filter what has long been the request filtering, log inspection, permission checks have been done, no need to re-use in view here to filter routing guard.
Routing guard with very little, you can understand.