Reputation: 2336
I've just initialized a Vue application and added some new routes. But they didn't work at all.
My router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import QuestionList from '@/components/pages/QuestionList'
import SessionList from '@/components/pages/SessionList'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/questions',
name: 'QuestionList',
component: QuestionList
},
{
path: '/sessions',
name: 'SessionList',
component: SessionList
},
]
})
export default router
My component:
<template>
<h1>test</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
When I go to localhost:8000/questions or localhost:8000/sessions nothing happens. + I don't see these components through Vue Dev Tools. What's wrong?
Upvotes: 1
Views: 648
Reputation: 1
as mentioned in official docs
you should add hash like localhost:8000/#/sessions
:
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload :
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Upvotes: 1