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>

注意router-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路径时都会返回该值，如上面第一个组件所示。 / p>

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

亲切的问候

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

<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

1 个答案: