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

Question

我正在使用Vue router指向src文件中名为components的文件夹中的不同组件，这很奇怪，但所有组件中的模板都是相同的，我导入了文件并以完全相同的方式定义了路由，当然除了我的主文件中的确切组件文件名之外。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/>'
})

奇怪的是，它们都展示了两个组成部分，家。vue和聚会。vue，其余的根本不显示。有人能帮忙吗？同样，组件模板本身是相同的，以防您漫游，提前感谢）

Answer 1

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

但是，如果希望具有相同的路由路径（但不推荐），仍然可以使用嵌套路由。请检查Vue路由器嵌套路由，如

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

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

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

那么你只需要在你的根路径中包含

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