嵌套路由的Vue路由器故障

Question

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

• http://localhost/blog
• http://localhost/blog/:category?/:search?/:page？
• http://localhost/blog/article/:slug

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

前两个路由使用Blog组件，第三个路由使用BlogPost组件。当我单击URL http://localhost/blog/article/slug_of_article时，一切正常，但是当我将其粘贴到URL地址中时，页面将由Blog组件呈现，就好像该URL是由Blog路由而不是BlogPost路由解析的一样。

以下是我的路由器配置的摘要：

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

我应该怎么做才能使其以我想要的方式工作？

Answer 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},