多个router-view无法同时显示

  • Z时代
  • 2024-03-13
  • 分类：IT

多个router-view无法同时显示

<!DOCTYPE html>
<html>
  <head>
    <title>My Eighth Vue app</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/router" title="vue-router">vue-router@4"></script>
    <div id="app"><router-view /><router-view name="sidebar" /></div>
    <script>
      const User = {
        props: ["id"],
        template: "<div>User {{ id }}</div>"
      };
      const Sidebar = {
        template: "<div>Sidebar {{ $route.params.id }}</div>"
      };
      const router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes: [
          {
            path: "/user/:id",
            components: { default: User, sidebar: Sidebar },
            props: { default: true, sidebar: false }
          }
        ]
      });
      // 5. 创建并挂载根实例
      const app = Vue.createApp({});
      //确保 _use_ 路由实例使
      //整个应用支持路由。
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>

如果去掉一个router-view就可以显示,两个同时存在就不显示,刚接触VUE实在找不到啥原因,请大家帮解答一下。

回答：

<router-view /><router-view name="sidebar" />改成<router-view></router-view><router-view name="sidebar"></router-view>
另外，head里那个vue没必要

以上是 多个router-view无法同时显示 的全部内容， 来源链接： utcz.com/p/937470.html

回到顶部