Menu
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.
411
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 });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
