Vue 第十一章 路由嵌套
1、路由嵌套
routes:[ { path:'/account', component:account, children:[ {path: '/login',component: login}, {path: '/register',component: register}, ] }
2、案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/account">Account</router-link> <router-view></router-view> </div> <template id="tmp"> <div> <h1>这是account组件</h1> <router-link to="/login">登陆</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> </template> <script> var account = { template:'#tmp' } var login = { template:'<h1>登陆</h1>' } var register = { template:'<h1>注册</h1>' } var router = new VueRouter({ routes:[ { path:'/account', component:account, children:[ {path: '/login',component: login}, {path: '/register',component: register}, ] } ] }) //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: {}, methods:{}, router }); </script> </body> </html>
本文来自博客园,作者:小白啊小白,Fighting,转载请注明原文链接:https://www.cnblogs.com/ywjfx/p/12562125.html