vue-router: pages not loading

Question

So using router/index.js I managed to at least get the home page displayed. Now I have moved the code to main.js to simplify it for this question, and not even the home page loads. I only get the vue logo:

main.js:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from '@/pages/Home.vue'
import DiscussionPage from '@/pages/DiscussionPage.vue'

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
    path: '/discussion-page/:id',
    name: 'DiscussionPage',
    component: DiscussionPage,
    props: true
    }
  ]

const router = createRouter({
    history: createWebHistory(),
    routes
  })

const forumApp = createApp(App)
forumApp.use(router)
  

forumApp.mount('#app')

Here's the template from the homepage (Home.vue inside src/pages):

<template>
  <div class="home">
      <p>This is the home page</p>
      <div class="discussions" v-for="discussion in discussions" :key="discussion.id">
        <router-link :to="{name: 'DiscussionPage', params: {id: discussion.id}}">
             {{ discussion.word}}
        </router-link>
      </div>
  </div>
</template>

There was no issues getting the discussions data before I added vue-router, is why I am not including that part of the code. Also, before I moved the code to main.js the url would change when clicking the router-link for the discussion page, but the page would not load.

I am using vue-router4 and I built the app using the CLI with the default vue3 option.

Any clues of what it is I am doing wrong? I am sure it is anobvious little detail, but I can't find it :-(

Thank you so much :-)

add <router-view /> into <div class="home">...</div>

Bulent
– Bulent

2021-12-27 09:39:56 +00:00
Commented Dec 27, 2021 at 9:39 — Bulent
– Bulent, Commented Dec 27, 2021 at 9:39

MnL · Accepted Answer · 2021-12-27 11:42:26Z

3

This was really silly, but I guess it is still worth publishing for beginners?

For the vue-router to work, one must add the router-view tag. I guess I could have added it in my home page as Bulent suggested. But I think it makes more sense to add it in App.vue so that affects the whole app.

I have to say that this is not clear at all from the current documentation: https://next.router.vuejs.org/guide/#router-link

So simply adding this on App.vue activated the router, and all works well now :

<template>
   <router-view/>
</template>

answered Dec 27, 2021 at 11:42

MnL

1531 silver badge11 bronze badges

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

1 Comment

MnL Over a year ago

This would also be the place to add the common top navigation menu bar to appear on all pages. By placing it above the router-view tag.

Collectives™ on Stack Overflow

vue-router: pages not loading

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related