动态路由器链接将*斜杠*更改为％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因为参数将使用{{3}编码}。

从子弹参数中删除前导斜线：

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

您也有两条具有相同名称的路线，这是不允许的。第二条dynamic路由无法通过名称解析。