Question

我使用v-for创建路由器链接，我在其中传递params道具，以便我可以在路由器视图中访问它们。现在，除了点击链接之外，我还需要通过其他方式访问路径时使用我的路径道具，例如使用$ router.go或外部URL导航。如何从现有路由器链接中提取/同步此数据？

<router-link
  v-for="item in items"
  :to="{
    name: 'Item',
    params: {
      url: `${item.no}-${item.title.replace(/\s+/g, '-')}`,
      no: item.no,
      title: item.title
    }
  }">
  {{item.no}}
  {{item.title}}
</router-link>

在Item组件中：

<article :key="no">
  <h1> {{ no }} {{ title }} </h1>
</article>

路线：

export default new Router({
  routes: [
    {
      path: '/:url',
      name: 'Item',
      component: Item,
      props: true
    }
  ]
})

Answer 1

我想最简单的解决方案是在URL中包含我需要渲染的道具。

<router-link
  v-for="item in items"
  :to="{
    name: 'Item',
    params: {
      no: item.no,
      title: item.title.replace(/\s+/g, '-')
    }
  }">
  {{item.no}}
  {{item.title}}
</router-link>

按如下方式分解网址：

export default new Router({
      routes: [
        {
          path: '/:no/:title',
          name: 'Item',
          component: Item,
          props: true
        }
      ]
    })

这种道具方式

<article :key="no">
  <h1> {{ no }} {{ title }} </h1>
</article>

将无法直接通过链接访问路线。

Vue router-link params页面加载或编程导航

1 个答案: