Vue router-link 页面加载或编程导航的参数

Question

我创建了带有 v-for 的 router-links，我在其中传递了 params 道具，这样我就可以在我的路由器视图中访问它们。现在我需要在访问路由时使用其他方式而不是单击 link，例如使用 $router.go 或外部 URL 导航时，我的路由道具可用。我如何 pull/sync 来自现有路由器的数据 - links?

<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>

项目组件内部：

<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>

像这样分解 URL：

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

这边这些道具

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

无需直接通过 link 访问路由即可使用。

Vue router-link 页面加载或编程导航的参数

Vue router-link params on page load or programmatic navigation

vue.js

vue-router

vuejs2