[Vue基础实战]组件嵌套问题
参考代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>组件嵌套问题</title> </head> <body> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <transition mode="out-in"> <router-view></router-view> </transition> </div> <template id="login"> <div> <router-link to="/login/forgetPwd">忘记密码</router-link> <router-link to="/scanLogin">扫描登录</router-link> <transition mode="out-in"> <router-view></router-view> </transition> </div> </template> <script src="../js/vue.js"></script> <script src="../js/vue-router.js"></script> <script> const loginExt = Vue.extend({ template: "#login", }); const registerExt = Vue.extend({ template: "<h3>注册组件</h3>", }); const forgetPwdExt = Vue.extend({ template: "<h3>忘记密码找回组件</h3>", }); const scanLoginExt = Vue.extend({ template: "<h3>这是是扫描登录组件</h3>", }); const logincst = Vue.component("logincom", loginExt); const registercst = Vue.component("registercom", registerExt); const forgetPwdcst = Vue.component("forgetpwdcom", forgetPwdExt); const scanLogincst = Vue.component("scanlogincom", scanLoginExt); const router = new VueRouter({ routes: [ { path: "/", redirect: "/login" }, { path: "/login", component: logincst, children: [ { path: "forgetPwd", component: forgetPwdcst }, { path: "/scanLogin", component: scanLogincst }, ], }, { path: "/register", component: registercst }, ], }); const app = new Vue({ el: "#app", router: router, }); </script> </body> </html>