VueJS Router doesn't load the component

Question

I am using VueJS Router, but the router is not loading the components.

I have About.vue and Contact.vue just with tag to test - following is how it looks like :

<template>
  <div>
    <h1>Contact page. Welcome baby!</h1>
  </div>
</template>

This is App.vue with three router-links and router-view.

<template>
   <div>
     <h1>Routing</h1>
     <router-link to="/">Home</router-link>
     <router-link to="/about">About</router-link>
     <router-link to="/contact">Contact</router-link>
     <router-view></router-view>
  </div>
</template>

This is main.js (the paths of importing files are correct)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routers} from './router'

Vue.use(VueRouter);

let router = new VueRouter({mode: 'history', routers});

new Vue({
    el:'#app',
    router,
    components: {
      'app-home' : App
    }
});

This is the JS file for the router. router.js (paths are correct)

import About from './About.vue'
import Contact from './Contact.vue'
import Home from './App.vue'

export const routers=[
    {
      path: '/' , component: Home
    },
    {
      path:'/about',component:About
    },
    {
      path:'/contact',component:Contact
    }
]

And, this is index.html

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <title>router</title>
 </head>
 <body>
    <div id="app">
       <app-home></app-home>
    </div>
  <script src="/dist/build.js"></script>
 </body>
</html>

When I load the page, the main page looks like the following :

and when I click the each nav, nothing is changed from the main page except URL. URL becomes

http://localhost:8080/contact

http://localhost:8080/about

but not loading the component I imported.

If you need more information to give advice, feel free to ask more. And if you have any clue of this issue, I appreciate if you share here.

Thank you.

Phil · Accepted Answer · 2017-09-01 03:59:47Z

13

The object key VueRouter is expecting is called routes, you are passing it routers.

Try this...

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

Alternatively, rename your "routers" variables to "routes". Eg

export const routes=[

and

import {routes} from './router'
// snip
let router = new VueRouter({mode: 'history', routes });

answered Sep 1, 2017 at 3:59

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Comments

Thedam · Accepted Answer · 2020-09-11 14:12:59Z

1

In my case I had to create a new Vue project (vue create Project) with "Manually select features"; then I had to mark "Router".

Previously I've created a project with defaults and I've installed router separately (npm install vue-router) - but at the end the routing didn't load the components.

ps. I use:

npm 6.14.6
nodejs v12.18.3
@vue/cli 4.5.4

answered Sep 11, 2020 at 14:12

Thedam

511 silver badge7 bronze badges

Comments

Dave · Accepted Answer · 2020-01-04 12:07:24Z

0

I was having the same symptoms as the OP but using netlify and gridsome (which uses vue.js. In my case it was a incorrectly tagged contact form that was the cause.

answered Jan 4, 2020 at 12:07

Dave

757 bronze badges

Collectives™ on Stack Overflow

VueJS Router doesn't load the component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related