Vue-Router嵌套路由
阿新 • • 發佈：2019-02-03
url 學生登錄 nts register viewport img ldr ice mpat
實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，例如：
借助 vue-router，使用嵌套路由配置，就可以很簡單地表達這種關系。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> </head> <body> <div id="app"></div> <script type="text/javascript"> //router-view中包含router-view //路由規則中包含子路由 let Login = { template:`<div> <h3>我是login的內容，下面是子路由的內容</h3> <router-view></router-view> </div>`} let Register = { template: `<div> <h3>我是register的內容，下面是子路由的內容</h3> <router-view></router-view> </div>` } let Student = { template:`<div> <h4>學生登錄入口</h4> </div>` } let Teacher = { template:`<div> <h4>教師登錄入口</h4> </div>` } let router = new VueRouter({ routes:[{ name:‘login‘, path:"/login", component:Login, children:[{ name:"login.student", path:"student", component:Student },{ name:"login.teacher", path:"teacher", component:Teacher } ] },{ name:‘register‘, path:"/register/:name", component:Register, children:[] }] }) let App = { template:` <div> <router-link :to="{name:‘login.student‘}">學生</router-link> <router-link :to="{name:‘login.teacher‘}">教師</router-link> <router-view></router-view> </div>` } new Vue({ el:"#app", template:`<app/>`, components:{ app:App }, router:router }) </script> </body> </html>
Vue-Router嵌套路由