Question

我正在使用vue rounter-link标记导航到其他页面。我的问题是它似乎无法导航到其他页面。我认为问题出在路由器链接的“参数”之内。我确实有一个blog_id为2，但它始终显示我当前所在的页面blog_id。

最初我有

<router-link v-bind:to="{name:'datascience-single', params: {blog_id: blog.blog_id}}">
    <i class="fa fa-cogs" aria-hidden="true"></i>
</router-link>

但是后来我开始认为可能不是正确地使用了blog.blog_id，因此我将其替换为固定值

        <li v-for="blog in blogs" v-bind:key="blog.id">
          <h1>{{blog.title}}</h1>
          {{blog.content}}
          <router-link v-bind:to="{name:'datascience-single', params: {blog_id: 2}}">
            <i class="fa fa-cogs" aria-hidden="true"></i>
          </router-link>
        </li>

但是问题仍然存在。

Answer 1

此答案假定您已经在导航中的同一条路线上。

导航到相同的路线不会刷新您的组件。我们习惯于每当我们转到不同的URL时，页面应刷新，并使用多页网站。但是Vue路由器处理此问题的方式有所不同。对于路由器，无论何时/blogs/{id}被更新时，路由id都不会改变，我们仍然在/blogs/{id}上，但是参数不同。

为了检测到这一变化，我们可以简单地对route参数进行监视：

watch: {
    '$route.params.id': (id) => {
        // The route is the same, but our parameter changed.
    }
}

无法使用vue router-link创建正确的链接

1 个答案: