Vuejs routing working only partially.

Question

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.

What if you change the "numbers" path to " /basic/alphabets/numbers"? If I understand your setup, it appears numbers is a child of alphabets which is a child of basic? Maybe a plunkr setup would be helpful. — Culpepper
– Culpepper, Commented Sep 9, 2017 at 20:31

LiranC · Accepted Answer · 2017-10-25 10:38:07Z

1

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/

edited Oct 25, 2017 at 10:38

LiranC

2,4802 gold badges31 silver badges58 bronze badges

answered Oct 25, 2017 at 10:12

isvlad

263 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs routing working only partially.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related