如何防止 nuxt-link 修改我设置的路径？答案

【问题标题】：How can I prevent nuxt-link from modifying the path I set?如何防止 nuxt-link 修改我设置的路径？
【发布时间】：2019-06-15 00:33:50
【问题描述】：

我的 nuxt 应用程序中有一个帖子页面。在旁边，我有一个 newArticles 组件，它显示了新文章的列表。我希望能够单击其中一篇新文章并导航到它。

您在文章上的 url 是 article/{articleId}。但是，当我使用 nuxt-link :to="postLink"，其中 postLink 是 'article/' + articleId 形式的计算属性时，我被路由到 article/articles/{articleId} 而不是 article/ {articleId}

我一直在阅读 vue 路由器文档，但找不到解决方案。我尝试使用确切的名称并将名称作为参数传递，但似乎没有帮助。

相关代码：

<template>
  <div class="box">
    <article class="media">
      <nuxt-link 
        :to="postLink" 
        exact>
        <div class="media-left helper">
          <figure class="image is-96x96">
            <img
              :src="imageLink"
              class ="side-image"
              alt="Image">
          </figure>
        </div>
      </nuxt-link>
    </article>
  </div>
</template>

<script>

export default {
  name: 'SideArticle',
  props: {
    id: {
      type: String,
      required: true
    },
    more props....
  },
  computed: {
    imageLink() {
      return process.env.IMAGES_BASE_URL + JSON.parse(this.imagesurls)[0]
    },
    postLink() {
      return 'article/' + this.id
    }
  },
}
</script>

【问题讨论】：

标签： vue-router nuxt.js

【解决方案1】：

您是否尝试在路径前添加斜杠？

像这样：

postLink() {
    return '/article/' + this.id
}

【讨论】：