嵌套路由的Vue路由器问题答案

【问题标题】：Vue router trouble with nested route嵌套路由的Vue路由器问题
【发布时间】：2019-01-06 17:56:33
【问题描述】：

长话短说，我想实现以下路线：

所以当用户输入/blog 时，就会显示文章列表。当用户输入/blog/:category?...时，将显示带有过滤器的文章列表，当用户输入/blog/article/:slug时，将显示文章的详细信息。

前两条路由使用 Blog 组件，第三条使用 BlogPost 组件。当我点击 url http://localhost/blog/article/slug_of_article 时一切正常，但是当我将它粘贴到 url 地址时，页面会使用博客组件呈现，就好像该 url 是由 Blog 路由解析的，而不是 BlogPost 路由。

下面是我的路由器配置的 sn-p：

{path: '/blog/:category?/:search?/:page?', name: "blog", component: Blog},
{path: '/blog/article/:slug', name: "blogPost", component: BlogPost}

我应该怎么做才能让它按我想要的方式工作？

【问题讨论】：

你试过翻转路由，所以“/article”首先匹配/article而不是/:category?？ Vue Router matching priority
成功了，谢谢。我错过了路由的优先部分。你能把这个写成答案让我接受吗？

标签： vue.js vuejs2 vue-router

【解决方案1】：

因为

/blog/article/slug_of_article 可以同时匹配

/blog/:category?/:search?/:page? 和

/blog/article/:slug路由，你得告诉路由器你喜欢先匹配哪一个。

The match priority is set by definition order，所以前面的路由会先匹配：

{path: '/blog/article/:slug', name: "blogPost", component: BlogPost},
{path: '/blog/:category?/:search?/:page?', name: "blog", component: Blog},

【讨论】：