vue.js - 路由器视图复制组件的问题

Question

最近从 laravel 路由改成了 Vue Router。每当我<router-view></router-view>在下面文件的任何部分插入 时，它都会复制路由器路由到的组件（即，它将复制组件的 div 部分并将其插入到 sidebar.vue 文件中）。

为了演示问题：vs

SideBar.vue 文件是

<template>
  <aside class="container_sidebar">
        <nav id="sidebar">
            <ul class="list-unstyled components">
                <li class="active">
                    <router-link to="/nghome">Home</router-link>
                </li>
                <li>
                    <router-link to="/ngsongs">All Songs</router-link>
                </li>
                <li>
                    <router-link to="/ngalbums">Albums</router-link>
                </li>
                <li>
                    <router-link to="/ngartists">Artists</router-link>
                </li>
            </ul>
        </nav>
    </aside>
    
</template>

我的 Router.js 文件是

import NightingaleHome from "./components/NightingaleHome";
import NightingaleSongs from "./components/NightingaleSongs";
import NightingaleArtists from "./components/NightingaleArtists";
import NightingaleAlbum from "./components/NightingaleAlbum";
import MusicUpload from "./components/MusicUpload";

export const routes = [{
        path: "/home",
        component: NightingaleHome,
        name: "home",
    },
    {
        path: "/ngsongs",
        component: NightingaleSongs,
        name: "All Songs",
    },
    {
        path: "/ngartists",
        component: NightingaleArtists,
        name: "All Artists",
    },
    {
        path: "/ngalbums",
        component: NightingaleAlbum,
        name: "All Album",
    },
    {
        path: "/fileupload",
        component: MusicUpload,
        name: "Music File Upload",
    },
];

我的 App.js 文件是

require('./bootstrap');

import { routes } from "./router";
import VueRouter from "vue-router";
import Vue from "vue";
import Vuesax from 'vuesax';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
    // Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

import 'vuesax/dist/vuesax.css' //Vuesax styles
Vue.use(Vuesax, {
    // options here
})

window.Vue = require('vue').default;

Vue.component('music-player', require('./components/MusicPlayer.vue').default);
Vue.component('music-upload', require('./components/MusicUpload.vue').default);
Vue.component('upload-progress', require('./components/UploadProgress.vue').default);
Vue.component('nightingale-songs', require('./components/NightingaleSongs.vue').default);
Vue.component('nightingale-album', require('./components/NightingaleAlbum.vue').default);
Vue.component('nightingale-artist', require('./components/NightingaleArtists.vue').default);
Vue.component('side-bar', require('./components/SideBar.vue').default);
Vue.component('edit-songs', require('./components/EditSongs.vue').default);
Vue.component('nightingale-home', require('./components/NightingaleHome.vue').default);

Vue.use(VueRouter);

let router = new VueRouter({
    mode: 'history',
    routes
});

const app = new Vue({
    el: '#app',
    router,

});

我没有 App.vue 文件，因为目前我不需要它。有什么解决办法吗？

标签： vue.jsvue-router