Vue Router动态路由匹配错误：Posts与Pages跳转组件不匹配如何解决？

问题根源 #

你当前的两个动态路由/:pageSlug和/:postSlug的路径格式完全一致，vue-router 会按照路由定义的先后顺序做匹配，排在前面的路由会优先被命中，所以才会出现两个列表都跳转到同一个组件的问题。

最优解决方案：给两类动态路由加区分前缀 #

这是逻辑最清晰、不易出冲突、也对SEO更友好的方案，修改步骤如下：

1. 修改路由配置（router/index.js） #

把页面详情、文章详情的路由加上不同的路径前缀，替换你原来的两个动态路由配置：

const routes = [
  // 原有固定路由不变，省略...
  {
    path: '/page/:slug', // 页面详情统一加/page前缀
    name: 'Page',
    component: () => import(/* webpackChunkName: "page" */ '../components/Page/Page.vue')
  },
  {
    path: '/post/:slug', // 文章详情统一加/post前缀
    name: 'Post',
    component: () => import(/* webpackChunkName: "post" */ '../components/Post/Post.vue')
  },
]

同时简化afterEach的逻辑：

router.afterEach((to) => {
  let body = document.querySelector('body');
  // 现在两种详情路由的参数都叫slug，直接取值即可
  if (to.params.slug) {
    body.classList.add('vue--page--' + to.params.slug);
  }
});

2. 修改列表页的跳转链接 #

Pages.vue 里的router-link修改为：

<router-link :to="`/page/${page.slug}`" tag="div" :key="page.id">
READ MORE 
</router-link>

另外注意你原来的key属性写的是key="page.id"，是静态值，要改成动态绑定:key="page.id"。

Posts.vue 里的router-link修改为：

<router-link :to="`/post/${post.slug}`" tag="div" :key="post.id">
READ MORE 
</router-link>

同时修正你Posts.vue里v-for的笔误：原来写的v-for="(post, index) in post"，要改成v-for="(post, index) in posts"，否则列表渲染会出错。

3. 调整详情组件的参数取值 #

在你的Page.vue和Post.vue中，请求对应WordPress接口时，参数从this.$route.params.pageSlug/this.$route.params.postSlug统一改为this.$route.params.slug即可。

补充说明 #

如果确实不想在路径上加前缀，也可以通过路由元信息、动态匹配规则做区分，但这类方案需要做额外的slug存在性校验，逻辑更复杂，还可能出现page和post slug重复的冲突，因此不推荐。

内容的提问来源于stack exchange，提问作者Meidanm