在 vuejs 中引用 router-link params 数据

Question

我有这个组件

<div class="card col-4" style="width: 22rem;">
  <img class="card-img-top" src="../assets/images/olu.jpg" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">{{ stories.articles[0].summary }}</p>
    <router-link :to="{path: '/viewArticle', params:{id:123}}"><a class="btn btn-primary">Continue Reading</a></router-link>

  </div>
</div>

注意路由器-link 标签：

<router-link :to="{path: '/viewArticle', params:{id:123}}"><a class="btn btn-primary">Continue Reading</a></router-link>

正在路由以显示 article.vue 组件，如下所示：

<template>
  <div>
    <div class="container row">
      <h1 class="display-3 col">Article in view</h1>

    </div>

    <div class="container">
      <img src="../assets/images/olu.jpg"/>
      <article>
        some text
      </article>

    </div>

  </div>


</template>

<script>
  // /console.log(params.id);
  export default {
    name: 'article',
    data() {
      return {

      }
    }
  }
</script>

这绝对没问题。我的问题很简单，我如何引用传递到 router-link params 属性的 id 值，在这个 article.vue 组件内，每当 /viewArticle 路径被击中时都会返回，如上面第一个组件所示。

我已经尝试查看文档和几篇文章，但到目前为止我还没有找到合适的解决方案。

亲切的问候

Answer 1

您可以按照 Passing Props to Router Component section.

中所述在文章路径上将 props 属性设置为 true

{
  name: 'article'
  path: '/viewArticle/:id',
  component: ArticleView // whatever you named the component
  props: true
}

然后你的 ArticleView 组件你可以添加一个 id prop:

<script>
  export default {
    name: 'article',
    props: ['id'],
    data() {
      return {
      }
    }
  }
</script>

id 现在可以直接在组件上使用，您可以获取文章。

如果您愿意，也可以预加载文章，以便传递实际文章而不是 id。

您可以通过向组件添加 beforeRouteEnter 来实现：

 <script>
  export default {
    name: 'article',
    props: ['id'],
    data() {
      return {
        article: null,
      }
    },
    beforeRouteEnter (to, from, next) {
       // your ajax stuff goes here
       // I use axios in this example
       axios.get(`/api/article/${to.params.id}`)
         .then((article) => {
           next(vm => {
             vm.article = article
           })
         })
         .catch(() => {
            next('/404')
         })
    }
  }
</script>

所以在进入路由器之前它会获取文章。这具有额外的优势，即您的所有组件代码都可以假定您已经加载了文章。您不必处理加载或未加载的情况。

此外，您还可以像这样访问匹配的路由：this.$route和导航路由器像这样：this.$router（最后是r）。

在 vuejs 中引用 router-link params 数据

Referencing router-link params data in vuejs

javascript

vue.js

vue-router

vue-component

vuejs2