Issue with Vue.js Router

1

I am having an issue causing me some confusion while using Vue.js. When I load localhost:8001/register it does not show the register page but rather shows the home page route. Any ideas on why this may be happening?

EDIT: The URL was http://localhost:8000/#/register not http://localhost:8000/register I just didn’t understand how Vue was handling routes.

src/router/index.js source

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Register from '@/components/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ]
})

src/components/Register.vue source

<template>
  <div class="register" scoped>
    <h1>{{ msg }}</h1>
    <h2>About This Project</h2>
    <ul>
      <li><a href="https://github.com/nsuchy/paste">Contribute On GitHub</a></li>
    </ul>
  </div>
</template>

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

<style scoped>

</style>
2

Just in case it went unoticed: here’s the doc page about history vs hashing route:

https://router.vuejs.org/en/essentials/history-mode.html

1 Like