vue.js - 动态路由器链接将 *slash* 更改为 %2F

Question

我对动态路由器链接没有什么问题。我从 API 获得了对象(页面)数组，其中之一是我的 home :

{
    name:"dynamic"
    parent_id:0
    partners:null
    slug:"/"
}

然后使用 v-for我要创建 router-link像这样:

<div v-for="page in pages">
    <router-link
      :to="{ name: page.name, params: { slug: page.slug }}"
      class="v-list__link"
    >
</div>

问题是当我将此链接呈现到 home 时不是 <a href="/">如我所料，但它带有编码引用:%2F => <a href="%2F">

router.js

export default new Router({
  scrollBehavior (to, from) {
    return { x: 0, y: 0 }
  },
  mode: 'history',
  routes: [
    {
      path: '/:slug',
      name: 'dynamic',
      component: Dynamic
    },
    {
      path: '/',
      name: 'dynamic',
      component: Dynamic
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
})

有谁知道怎么解决吗？

Answer 1

路由的路径是/:slug。当使用等于 / 的 slug 解析时，您将得到 // 作为最终路径，除了它将解析为 /%2F 因为参数将使用 encodeURIComponent 编码.

从 slug 参数中删除前导斜杠:

page.slug.replace(/^\//, '')

您还有两条同名的路线，这是不允许的。第二个 dynamic 路由无法按名称解析。