CODEWITHSUNDEEP
vue.jsvue-router
Shawn Wilson
Shawn Wilson

Reputation: 1351

Vue Routing vue adding a /#/ to url and if clears defaults all urls to '/'

Hey all so I have a vue CLI App.

in development mode my url defaults to:

http://localhost:8080/#/

if I try to do http://localhost:8080/signin it redirects back to http://localhost:8080/signin#/ but displays my '/' view.

my router file looks like:

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

Vue.use(Router)

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

I have no idea why this is happening! any advise or assistance here would be great!

Upvotes: 0

Views: 46

Answers (1)

MarcRo
MarcRo

Reputation: 2473

The default setting for vue-router is 'hash' mode. It adds an hash to your URL to prevent the browser from actually trying to load something from this URL when the user refreshes the window (as it treats everythign after the hash symbol as the hash).

You can change the mode to 'history' in the vue-router config. 

// router.js

export const router = new Router({
  mode: 'history',
  routes: [.....]
}

This will work out of the box and remove the hash in your URL - however, if the user reloads the page (refresh) the browser will try to look up the entire URL. Unless your server is configured to handle all 'maverick' routes, it will return a 404 Error. You can read more about this in the official vou-router config

Upvotes: 1

Related Questions