[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>

 

posted @ 2021-01-17 19:40  dshow  阅读(176)  评论(0)  编辑  收藏  举报