fix for #1234, order less greedy routes first

[pimlie]

As it is possible to use dynamic route matching with nuxt, you can get into problems when you have multiple routes that match the same url. See #1234 for an example case.

The vue-router documentation states that:

Sometimes the same URL may be matched by multiple routes. In such a case the matching priority is determined by the order of route definition: the earlier a route is defined, the higher priority it gets

This commit changes the route sorting behaviour by making sure that less greedy routes are listed before more greedy routes. In this context a less greedy route is defined as having more segments in its path (e.g. /a/b/c is less greedy then /a)

[pimlie]

CI fails because the order of the routes in .nuxt/router.js has changed. If you give this commit your approval I will update the test to reflect the new route orders before merging

[alexchopin]

Hi @pimlie, I see what you mean, however, this PR resolve only your use case. (e.g: /* route will be sorted after /*/* unfortunately)
I'll take a look on it 👍

[pimlie]

@alexchopin In my rc3 project the / route is still set as the first entry. This is because the sorting function explictly checks for the / route: https://github.com/nuxt/nuxt.js/blob/dev/lib/common/utils.js#L216

            {
                        path: "/", 
                        component: _7dcc7ef7,
                        name: "index"
                },
                {
                        path: "/*/p",
                        component: _1f3bd925,
                        name: "all-p",
                        children: [
                                {
                                        path: "*", 
                                        component: _3ffae7f5,
                                        name: "all-p-all"
                                }
                        ]
                },
                {       
                        path: "/disclaimer",
                        component: _50775646,
                        name: "disclaimer"
                },
                {       
                        path: "/blog",
                        component: _c7e6c1e6,
                        children: [
                                {
                                        path: "",
                                        component: _2556e7d0,
                                        name: "blog"
                                },
                                {
                                        path: "*", 
                                        component: _689c5846,
                                        name: "blog-all"
                                }
                        ]
                },
                {       
                        path: "/*",
                        component: _15c1aa07,
                        name: "all"
                }

[alexchopin]

@pimlie What's happening if you go to this URL /blog/p/a?

[pimlie]

Then it indeed goes to the product component and not the blog.

I rewrote the commit to check for segment length within the for loop, now the following route list is generated:

    routes: [
                {
                        path: "/",
                        component: _7dcc7ef7,
                        name: "index"
                },
                {
                        path: "/disclaimer",
                        component: _50775646,
                        name: "disclaimer"
                },
                {
                        path: "/blog",
                        component: _c7e6c1e6,
                        children: [
                                {
                                        path: "",
                                        component: _2556e7d0,
                                        name: "blog"
                                },
                                {
                                        path: "*",
                                        component: _689c5846,
                                        name: "blog-all"
                                }
                        ]
                },
                {
                        path: "/*/p",
                        component: _1f3bd925,
                        name: "all-p",
                        children: [
                                {
                                        path: "*",
                                        component: _3ffae7f5,
                                        name: "all-p-all"
                                }
                        ]
                },
                {
                        path: "/*",
                        component: _15c1aa07,
                        name: "all"
                }
    ],

Seems to work better indeed.

[pimlie]

@alexchopin Looking at the code a final time, what is exactly the meaning of the following code?

          if (i === _b.length - 1 && res === 0) {
            res = 1
          }

Was that meant to fix this issue already? Do we still need it?

Never mind, I got it. To fix the order this should return -1 and not 1.

[Atinux]

Hi @pimlie

It was a bit different to make it work, but your issue and PR helped us to update the code to make the fix, thank you!

See the updated tests and code to see the fix: db47df0

It will be available soon in rc5

[pimlie]

@Atinux Thanks, as long as the issue is resolved I am happy 👍

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.