[Vuejs]-VueRouter does not load components as expected

by

4👍

✅

The vue router mounts the components you define in your routes in the <router-view> tag/component. Most likely you want this in your App.vue or whatever you use as root component. You would end up with something like this:

// App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

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

Vue.use(VueRouter)

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

const app = new Vue({
  router,
  components: { App },
  template: '<App />'
}).$mount('#app')

Notice that two things have changed in this code. The first is that we are now defining a router-view in our main component, namely App. The second is that we use this component to mount it in main.js.

👤Sumurai8

Leave a comment