嵌套路由 ╰半橙微兮° 2022-06-01 00:23 218阅读 0赞 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/vue-router.js"></script> </head> <body> <div id="example"> <router-view></router-view> </div> <script type="text/javascript"> var Login=Vue.component('login-component',{ template:` <div> <h1>这是登录界面</h1> </div> ` }); var Mail=Vue.component('mail-component',{ methods:{ jump(desPath){ this.$router.push(desPath); }, back(){ this.$router.go(-1); //手机端可以使用此方法来返回 -1表示后退,1表示前进 } }, template:` <div> <h1>这是邮箱主界面</h1> <button @click="back">返回</button> <button @click="jump('/myInbox')">收件箱</button> <button @click="jump('/myOutbox')">发件箱</button> <router-view></router-view> </div> ` }); var Inbox=Vue.component('Inbox-component',{ template:` <ul> <li>收件箱1</li> <li>收件箱2</li> <li>收件箱3</li> </ul> ` }); var Outbox=Vue.component('Outbox-component',{ template:` <ul> <li>发件箱1</li> <li>发件箱2</li> <li>发件箱3</li> </ul> ` }); const myRoutes=[ {path:'',component:Login}, {path:'/myLogin',component:Login}, { path:'/myMail', component:Mail, children:[ {path:'',component:Inbox}, {path:'/myInbox',component:Inbox}, {path:'/myOutbox',component:Outbox} ] } ]; const myRouter=new VueRouter({ routes:myRoutes }) new Vue({ el:'#example', router:myRouter }) </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/vue-router.js"></script> </head> <body> <div id="example"> <router-view></router-view> </div> <script type="text/javascript"> var Cart=Vue.component('cart',{ template:` <h1>购物车</h1> ` }); var Confirm=Vue.component('orderconfirm',{ methods:{ jump(desPath){ this.$router.push(desPath); } }, template:` <div> <h1>订单确认界面</h1> <button @click="jump('/firstConfirm')">首次确认</button> <button @click="jump('/secondConfirm')">再次确认</button> <router-view></router-view> </div> ` }); var firstConfirm=Vue.component('firstorderconfirm',{ template:` <p>请确认信息</p> ` }); var secondConfirm=Vue.component('secondorderconfirm',{ template:` <p>请再次确认信息</p> ` }); var NotFound=Vue.component('not-found',{ template:` <h1>404 page not found</h1> ` }); const myRoutes=[ {path:'',component:Cart}, {path:'/myCart/',component:Cart}, { path:'/myConfirm/', component:Confirm, children:[ {path:'',component:firstConfirm}, {path:'/firstConfirm',component:firstConfirm}, {path:'/secondConfirm',component:secondConfirm} ] }, {path:'*',component:NotFound} ]; const myRouter=new VueRouter({ routes:myRoutes }); new Vue({ el:'#example', router:myRouter }) </script> </body> </html>
还没有评论,来说两句吧...