VueJs 组件未显示使用 Vue 路由器

Question

我正在使用 Vue 路由器在我的 src 文件中指向名为 components 的文件夹中的不同组件，这很奇怪，但是所有组件中的模板都是相同的，我已经导入文件并以完全相同的方式定义路由，当然除了确切的组件文件名 这是我的 main.js 文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import CreateMeetUp from '@/components/Meetup/CreateMeetUp'
import Profile from '@/components/user/Profile.vue'
import SignIn from '@/components/user/SignIn'
import SignUp from '@/components/user/SignUp'
import Meetup from '@/components/Meetup/Meetup.vue'
import msg from '@/components/msg.vue'

Vue.use(Router)
export default new Router({
  base: __dirname,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Meetup',
      component: Meetup
    },
    {
      path: '/Meetup',
      component: CreateMeetUp
    },
    {
      path: '/user',
      component: Profile
    },
    {
      path: '/user',
      component: SignIn
    },
    {
      path: '/user',
      component: SignUp
    },
    {
      path: '/',
      component: HelloWorld
    },
    {
      path: '/',
      component: msg
    }

  ],
  mode: 'history'
})

这是我的 main.js 文件

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

奇怪的是，它们中的两个组件都显示出来了，Home.vue 和 Meetup.vue，其余的根本没有显示。有人可以帮忙吗？再次，组件​​模板本身是相同的，以防你徘徊，提前感谢）

Answer 1

Jorj 和 Magnus 是正确的，您有相同的路径，例如 '/user' 和 '/Meetup'，这会导致您的所有问题。

但是，如果您希望拥有相同的路由路径（但不推荐），仍然可以通过嵌套路由。请点赞Vue-Router Nested-Routes

const router = new VueRouter({
  routes: [
  {
   path: '/meetup', component: Meetup,
   children: [

    { path: '/meetup', component: CreateMeetUp },

    // ...other sub routes
   ]
  }
 ]
})

然后你只需要包含在你的根路径中

Meetup.vue

  <transition mode="out-in">
     <router-view></router-view>
  </transition>