时间戳

首页 > 解决方案 > 无法使用 vue router-link 创建正确的链接

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

问题描述

我正在使用 vue rounder-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>

但是问题仍然存在。

标签： vue.jsvuejs2vue-router

解决方案

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

导航到相同的路线不会刷新您的组件。我们习惯于每当我们转到不同的 URL 时，页面应该刷新，多页网站。然而 Vue 路由器以不同的方式处理这个问题。对于路由器，路由，例如：/blogs/{id}，在更新时不会改变id，我们仍然在/blogs/{id}但使用不同的参数。

为了检测这种变化，我们可以简单地在路由参数上创建一个观察者：

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

推荐阅读