How do I get router-view to render components inside another component?

Question

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

I have another component called <content> in App. Inside <content>, I have various other components 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 commented 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 components 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 './components/introduction/introduction'
import Skills from './components/skills/skills'
import Projects from './components/projects/projects'
import Education from './components/education/education'
import FAQ from './components/FAQ/faq'

const routes = [
  { path: '/', redirect: '/Introduction'},
  { path: '/Introduction', name: 'Introduction', component: Introduction},
  { path: '/Skills', name: 'Skills', component: Skills},
  { path: '/Projects', name: 'Projects', component: Projects},
  { path: '/Education', name: 'Education', component: Education},
  { path: '/FAQ', name: 'FAQ', component: 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 './components/content.vue'
import Footer from './components/site-footer.vue'
export default {
  name: 'app',
  components: {
    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.

you forgot to export default routes in routes.js

Sovalina
– Sovalina

2018-05-21 12:47:57 +00:00
Commented May 21, 2018 at 12:47 — Sovalina
– Sovalina, Commented May 21, 2018 at 12:47
Yes, that worked. Thank you!

Divyanth Jayaraj
– Divyanth Jayaraj

2018-05-21 13:38:31 +00:00
Commented May 21, 2018 at 13:38 — Divyanth Jayaraj
– Divyanth Jayaraj, Commented May 21, 2018 at 13:38

Zamir · Accepted Answer · 2020-01-27 11:42:05Z

3

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", components: Content,
   children: [
    { path: "/Introduction", name: "Introduction", component: Introduction },
    { path: "/Skills", name: "Skills", component: Skills },
    { path: "/Projects", name: "Projects", component: Projects },
    { path: "/Education", name: "Education", component: Education },
    { path: "/FAQ", name: "FAQ", component: FAQ }
   ]
 }
];

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

I think official documentation also can helpfull.

edited Jan 27, 2020 at 11:42

answered May 21, 2018 at 13:03

Zamir

4411 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Divyanth Jayaraj · Accepted Answer · 2018-05-22 02:37:42Z

0

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

answered May 22, 2018 at 2:37

Divyanth Jayaraj

9605 gold badges13 silver badges32 bronze badges

Collectives™ on Stack Overflow

How do I get router-view to render components inside another component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related