Vue-router: [2.0] default named child routes not being matched

[marcvdm]

Vue.js & vue-router.js version

2.0.0.rc3

Reproduction Link

https://jsfiddle.net/u5jjwzft/9/

Steps to reproduce

Click on the links and you will see that when using the router-link with :to="{name: 'parent'}" wil not load default

What is Expected?

When either you use to="/parent" or :to="{name:'parent'}" you expect to see the default child route component.

What is actually happening?

It is not showing the default child route component.
On first page load of /parent it works but when clicking on one link and then to the named route it doesn't work.

[yyx990803]

I'd say this is expected behavior - named routes are precise targets, i.e. when you specify { name: 'parent' }, you are telling the router that you explicitly want to navigate to that route with no child route. If you want to navigate to the default child route, then you should be using the name of that child route instead.

[joemsak]

I know this issue is old but I completely disagree. I made the default child the default for a reason and now I can never refer to my route with { name: 'my-route-name' } for this particular view in my app. That makes no sense. If I change the URL of that view I can't rely on the named route logic to save me from the work of updating the links throughout the code.

I found this issue specifically because I was confused by this so-called "expected" behavior. I actually expected my default child to be rendered any time I visit that parent route/component, regardless of how I link to it

[zevdg]

@joemsak I also found this behavior intuitive and it was problematic for me when I attempted to implement an "up" button to navigate up the site hierarchy. I could programatically find the name of the current route's parent, but finding the name of that parent's defaultChild was problematic.

Fortunately, there is a workaround described at https://github.com/vuejs/vue-router/issues/822#issuecomment-255685008 to give the behavior that we expect.

new Router({
    routes: [{
        path: "/parent/:someProp",
        component: Parent,
        name: "parent",
        // explicitly reroute to default child on named navigation
        // https://github.com/vuejs/vue-router/issues/822#issuecomment-255685008
        redirect: "/parent/:someProp",
        children: [
            {
                path: "",
                name: "defaultChild",
                component: DefaultChild
            },
        // ...