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

Question

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

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

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

相关代码：

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

Answer 1

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

像这样：

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

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

How can I prevent nuxt-link from modifying the path I set?

vue-router

nuxt.js