CODEWITHSUNDEEP
vue.jsvuejs2vue-router
hidar
hidar

Reputation: 5939

Vuejs routing working only partially.

My App works just fine, if I put routes without childrens (nesting) but I tried to nest it just now and converted my routes to this: in routes.js

import alphabetsPage from './components/views/pages/alphabets.vue'
import dictionaryPage from './components/views/pages/dictionary.vue'
import numbersPage from './components/views/pages/numbers.vue'

import LayoutView from './components/views/Layout.vue'

const routes = [{

  path: '/',
  name: 'Home',
  component: LayoutView,
    children: [{
        path: 'basic',
        name: 'Basic',
        component: alphabetsPage,
          children: [{
            path: 'alphabets',
            name: 'Aphabets',
            component: alphabetsPage           
          },
          {
            path: 'numbers',
            name: 'Numbers',
            component: numbersPage           
          }]
    }]
}]

export default routes

If I go to / or click on route <router-link to="/basic/alphabets" tag="li"><a>numbers</a></router-link> I can see the alphabetsPage component, however if I go click on <router-link to="/basic/numbers" tag="li"><a>numbers</a></router-link> the route doesn't work. I have a numbersPage componet working.

This must be from the routes, because, if I don't use children and just define the path in routes as /basic/numbers or /basic/alphabets it works.

Upvotes: 2

Views: 388

Answers (1)

isvlad
isvlad

Reputation: 26

Children should be shown somewhere.

Your alphabetsPage do not have in template

const alphabetsPage = {
    template: '<div>/basic/alphabets <router-view></router-view></div>'
}

https://jsfiddle.net/6fvL1xwc/

Upvotes: 1

Related Questions