VueJs components are not showing using the Vue router

Question

I am using Vue router to direct to different components in a folder called components in my src file, It's very weird but the templates in all components are identical and I have imported files and defined the routes exactly the same way, of course except the exact component file name here my main.js file

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'
})

and here is my main.js file

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/>'
})

the weird part is, exactly two components out them all are showing, the Home.vue and the Meetup.vue, the rest is simply not showing at all. can someone help please? again the component templates themselves are the same in case you wandered, thanks in advance)

You defined some routes with the same path and different components. For example, for /Meetup, what component do you want to be rendered? Meetup or CreateMeetup? Remove all routes that have duplicate paths and it should work — Jorj
@Jorj has the answer. When multiple routes are defined with the same path, only the first is used. Which means that /user should also work, redirecting to the Profile component. — Magnus Buvarp
yes but can't i have multiple components within one path, and by selecting the component name via the component attribute i select the specific component that i want to show >> — Swilam Muhammad
@magus not even the Profile is not showing still, i get your point though but it still not working, only the Home and the Meetup showing !!! — Swilam Muhammad

gil gil · Accepted Answer · 2018-07-19T15:36:59

Jorj and Magnus are correct you have the same path such as '/user' and '/Meetup' which causes all your problems.

However, if you like to have the same route paths (Not recommended though), its still possible by nested routing. Please check Vue-Router Nested-Routes like

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

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

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

Then you just have to include in your root path

Meetup.vue

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

VueJs components are not showing using the Vue router

1 Answers

Meetup.vue