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 是正确的，因为您使用相同的路径，例如$packageList.Remove($packageList[n])和'/user'会导致所有问题。

但是，如果您希望具有相同的路由路径（尽管不建议这样做），则仍然可以通过嵌套路由来实现。请检查Vue-Router Nested-Routes，如

'/Meetup'

然后，您只需在根路径中添加

Meetup.vue

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

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

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

Vue路由器未显示VueJs组件

1 个答案:

Meetup.vue