Vue-router is not working

Question

I am a Vue newbie . I have been trying to setup a simple route using Vue-Router. But i am having a problem which is i dont know why.

I can see the 'Dashboard' message when i go to the url "http://localhost:8080/#/" but i could not see 'Login' when i go to the url "http://localhost:8080/#/login".

Thank you

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/components/Dashboard'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Dashboard
    },
    {
      path: '/login',
      Component: Login
    }
  ]
})

Login.vue

<template>
    <p>Login</p>
</template>

<script>
  export default {}
</script>

App.vue

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

<script>
export default {}
</script>

Dashboard.vue

<template>
    <p>Dashboard</p>
</template>

<script>
  export default {
    name: 'Dashboard'
  }
</script>

Answer 1

I'm not a Vue expert, but I have a feeling you should be navigating to localhost:8080/login and not localhost:8080/#/login

You've also capitalised Component in line 16 of your index.js