Most examples I see out there, has <router-view> set up inside the main App.vue ponent but mine isn't like that.

I have another ponent called <content> in App. Inside <content>, I have various other ponents like <skills>, <projects> etc.

Right now, I'm toggling each of them using a v-show but now, I want to use routes.

Here's the template of my App.vue

  <div id="app">
    <img id="photo" src="../public/assets/IMG_3187.jpg">
    <Content msg="Divyanth Jayaraj"/>
    <site-footer></site-footer>
  </div>

Inside the Content.vue, the template looks like this. Notice the mented tags.

<div class="content">
    <h1>{{ msg }}</h1>
    <p>
      UI/UX Consultant
    </p>
    <navbar @select='navigate($event)'></navbar>
    <router-view></router-view>
    <!-- <intro v-show='this.navSelect == "Introduction"'></intro>
    <skills v-show='this.navSelect == "Skills"'></skills>
    <education v-show='this.navSelect == "Education"'></education>
    <projects v-show='this.navSelect == "Projects"'></projects>
    <faq v-show='this.navSelect == "FAQ"'></faq> -->
  </div>

The <router-view> is supposed to render each of my ponents but aren't. Just for reference, I set up vue-router after I built most of the project.

Just for reference, here's how I have my router set up.

This is routes.js

import Introduction from './ponents/introduction/introduction'
import Skills from './ponents/skills/skills'
import Projects from './ponents/projects/projects'
import Education from './ponents/education/education'
import FAQ from './ponents/FAQ/faq'

const routes = [
  { path: '/', redirect: '/Introduction'},
  { path: '/Introduction', name: 'Introduction', ponent: Introduction},
  { path: '/Skills', name: 'Skills', ponent: Skills},
  { path: '/Projects', name: 'Projects', ponent: Projects},
  { path: '/Education', name: 'Education', ponent: Education},
  { path: '/FAQ', name: 'FAQ', ponent: FAQ}
]

This is main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes.js'



Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({
  routes: Routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

This is my App.vue although this might not be relevant

import Content from './ponents/content.vue'
import Footer from './ponents/site-footer.vue'
export default {
  name: 'app',
  ponents: {
    Content,
    'site-footer' : Footer
  }
}

What am I doing wrong? Right now, there's nothing rendering inside <router-view>. I'm not getting any errors either.

Most examples I see out there, has <router-view> set up inside the main App.vue ponent but mine isn't like that.

I have another ponent called <content> in App. Inside <content>, I have various other ponents like <skills>, <projects> etc.

Right now, I'm toggling each of them using a v-show but now, I want to use routes.

Here's the template of my App.vue

  <div id="app">
    <img id="photo" src="../public/assets/IMG_3187.jpg">
    <Content msg="Divyanth Jayaraj"/>
    <site-footer></site-footer>
  </div>

Inside the Content.vue, the template looks like this. Notice the mented tags.

<div class="content">
    <h1>{{ msg }}</h1>
    <p>
      UI/UX Consultant
    </p>
    <navbar @select='navigate($event)'></navbar>
    <router-view></router-view>
    <!-- <intro v-show='this.navSelect == "Introduction"'></intro>
    <skills v-show='this.navSelect == "Skills"'></skills>
    <education v-show='this.navSelect == "Education"'></education>
    <projects v-show='this.navSelect == "Projects"'></projects>
    <faq v-show='this.navSelect == "FAQ"'></faq> -->
  </div>

The <router-view> is supposed to render each of my ponents but aren't. Just for reference, I set up vue-router after I built most of the project.

Just for reference, here's how I have my router set up.

This is routes.js

import Introduction from './ponents/introduction/introduction'
import Skills from './ponents/skills/skills'
import Projects from './ponents/projects/projects'
import Education from './ponents/education/education'
import FAQ from './ponents/FAQ/faq'

const routes = [
  { path: '/', redirect: '/Introduction'},
  { path: '/Introduction', name: 'Introduction', ponent: Introduction},
  { path: '/Skills', name: 'Skills', ponent: Skills},
  { path: '/Projects', name: 'Projects', ponent: Projects},
  { path: '/Education', name: 'Education', ponent: Education},
  { path: '/FAQ', name: 'FAQ', ponent: FAQ}
]

This is main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes.js'



Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({
  routes: Routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

This is my App.vue although this might not be relevant

import Content from './ponents/content.vue'
import Footer from './ponents/site-footer.vue'
export default {
  name: 'app',
  ponents: {
    Content,
    'site-footer' : Footer
  }
}

What am I doing wrong? Right now, there's nothing rendering inside <router-view>. I'm not getting any errors either.

• javascript
• vue.js
• vue-ponent
• vue-router

• 1 you forgot to export default routes in routes.js – Sovalina Commented May 21, 2018 at 12:47
• Yes, that worked. Thank you! – Divyanth Jayaraj Commented May 21, 2018 at 13:38

2 Answers 2

You can use nested routes. I did not test your code for myself. However I guess it works if you change your code similar to following.

const routes = [
  { path: "/", redirect: "/Introduction" },
  { path: "/contents", ponents: Content,
   children: [
    { path: "/Introduction", name: "Introduction", ponent: Introduction },
    { path: "/Skills", name: "Skills", ponent: Skills },
    { path: "/Projects", name: "Projects", ponent: Projects },
    { path: "/Education", name: "Education", ponent: Education },
    { path: "/FAQ", name: "FAQ", ponent: FAQ }
   ]
 }
];

And also add <router-view> to App.vue ponent.

I think official documentation also can helpfull.

As sovalina mentioned, adding export default routes in routes.js fixed my problem.