Reputation: 8998
This is my router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'
import Login from '../views/Login'
Vue.use(Router)
export default new Router({
//mode: 'hash',
routes: [
{
path: '/',
component: Home
},
{
path: '/login',
component: Login
},
]
})
And this is my login view
<template>
<div class="page">
<p>
Login
</p>
</div>
</template>
<script>
export default {
components: { }
}
</script>
But anywhere I browse to, http://127.0.0.1:4000/login http://127.0.0.1:4000/home http://127.0.0.1:4000/asdasdf it renders the home template, what am I missing?
this is my app.js
import Vue from 'vue'
import { sync } from 'vuex-router-sync'
import App from './components/App'
import router from './router'
import store from './store'
sync(store, router)
const app = new Vue({
router,
store,
...App
})
export { app, router, store }
I run the dev server with
npm run dev
If I modify the home template I see the changes, but the routing doesnt seem to work to /login or other views.
Upvotes: 1
Views: 62
Reputation: 4132
Add the <router-view></router-view>
in your main component (App.vue
):
<template>
<!-- html elements of the App.vue page -->
<!-- router component -->
<router-view></router-view>
</template>
And specify history mode in your router:
export default new Router({
mode: 'history',
routes: [
...
Upvotes: 3