Vue.js：路由器出现故障

Question

所以我试图实现路由器，以便当侧边栏处于活动状态时，您可以单击将您带到不同页面或路线的按钮。

但是，路线根本不起作用，单击按钮会更改网络链接，但不会执行任何操作。

这是文件夹路由器中 index.js 的代码：

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import contact from "../views/Contact.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/contact",
      name: "contact",
      component: contact,
    },
  ],
});

export default router;

我的 main.js 是：

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
// import Vue from "vue";
import router from "./router";


const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");

最后，我的 App.vue 是：

<template>
  <div id="app">
    <nav class="main-nav">
      <div class="logo">my.company</div>
      <Burger></Burger>
    </nav>

    <Sidebar>
      <ul class="sidebar-panel-nav">
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>
      </ul>
    </Sidebar>
  </div>
</template>

<script lang="ts">
import Burger from "./components/Burger.vue";
import Sidebar from "./components/topbar.vue";

export default {
  name: "app",
  components: {
    Burger,
    Sidebar,
  },
};
</script>
<style>
html {
  height: 100%;
  overflow: hidden;
}

body {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "Lato";
  height: 100%;
  background: rgb(101, 31, 87);
  background: linear-gradient(
    45deg,
    rgba(101, 31, 87, 1) 0%,
    rgba(225, 113, 87, 1) 48%,
    rgba(249, 248, 113, 1) 100%
  );
}

.logo {
  align-self: center;
  color: #fff;
  font-weight: bold;
  font-family: "Lato";
}

.main-nav {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
}

ul.sidebar-panel-nav {
  list-style-type: none;
}

ul.sidebar-panel-nav > li > a {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  display: block;
  padding-bottom: 0.5em;
}
</style>

（App.vue 中的大部分代码要么是样式标签，要么是与路由器无关的东西，Burger 代表切换侧边栏的汉堡栏，侧边栏是不言自明的）。

我不确定为什么路由器无法正常工作，我们将不胜感激。

Answer 1

在App.vue模板的某处添加router-view组件。 它将显示对应于 url 的组件。