CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
Desiigner
Desiigner

Reputation: 2336

Vue.js router doesn't see components

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

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

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

Related Questions