Why do my Vue-router doesnt route to my pages?

Question

I got my Vue.js application, i've installed vue-router, via npm i vue-router, i got a router-link on my main page App.vue, and i want to redirect to my Inscription.vue. I do go on the http://localhost:8080/inscription when i click on the router-link, but the view doesnt change, im still on my main page, i don't understand why ? (i got no error)

My main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false;

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

Vue.use(router);

My router/index.js :

import Vue from 'vue'
import Router from 'vue-router'
import App from '../App.vue'
import Inscription from '../Inscription.vue'

Vue.use(Router)

const routes = [
  {
      path: '/',
      name: 'Home',
      component: App
  },
  {
      path: '/inscription',
      name: 'Inscription',
      component: Inscription
  }
]

const router = new Router({
  mode: 'history',
  routes: routes
});

export default router;

My App.vue simplified

<template>
  <div class="acceuil_main">
    <div class="navbar_element">
      <router-link :to="{name: 'Inscription'}">Inscription</router-link>
    </div>
  </div>
</template>

<script>

export default {
  name: "App",
  data () {
    return {
      beers: null,
      connected: false,
      user: null
    }
  }
};
</script>

My Inscription.vue simplified

<template>
  <div class="acceuil_main">
    <a class="navbar_element">
      Inscription
    </a>
  </div>
</template>

<script>

export default {
  name: "Inscription",
  data () {
    return {
      title: "Inscription",
      connected: false,
      user: null
    }
  }
};
</script>

a picture of my folder architecture

Michal Levý Michal Levý · Accepted Answer · 2021-03-03T11:04:33

For router to actually work you need a <router-view> component somewhere in your app. The best place is probably the App component. Check the docs

<router-view> works as a placeholder - router put there the component configured for a route when the route is active.

In that sense your / route should probably not use App component but something else - create another component for example Home which will be displayed on the root route (/)

const App = Vue.component('App', {
  name: "App",
  template: `
  <div class="acceuil_main">
    <div class="navbar_element">
      <router-link :to="{name: 'Inscription'}">Inscription</router-link>
    </div>
    <router-view></router-view>
  </div>
  `
})

const Inscription = Vue.component('Inscription', {
  template: `
  <div>Inscription</div>`
})

const routes = [{
  path: '/inscription',
  name: 'Inscription',
  component: Inscription
}]

const router = new VueRouter({
  mode: 'history',
  routes: routes
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>

Why do my Vue-router doesnt route to my pages?

1 Answers