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 的組件。