Cant make router work

Question

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.

Answer 1

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: [
  ...