Question

当我尝试通过 VueRouter 推送具有 profileID 的新 profile 时，我收到一条错误消息： 避免冗余导航到当前位置：“ /用户/ ID”。 单击按钮时，它不会将我重定向到另一页，而只是跳转到当前页面的开头。

我在 index.js 文件中声明了我的路线，如下所示：

const routes = [
    {
        path: '/',
        name: 'EntryPoint',
        component: EntryPoint
    },
    {
        path: '/main',
        name: 'Main',
        component: Main
    },
    {
        path: '/user/:id',
        name: 'User Current',
        component: CurrentUser
    },

当我在用户页面上时，URL中的路径已经包含用户ID -因此 ＃/用户/ 1111 。

现在在同一用户页面上，当用户单击按钮时，我想导航到另一个用户：

 <ContactCard
          v-for="user in users"
          @goToUser="goToUser(user.id)"
        />

goToUser(userId) {
      this.$router.push({ name: "User Current", params: { id: userId } });
    },

我从 users 数组中获得的 id 包含每个用户的不同ID。

任何建议为什么路由不能正常工作？

单击按钮时，我看到一个实例，该URL随正确的路径更改： ＃/ user / 1112 。如果要更新页面，它会删除网址，跳至顶部，并在再次选择按钮时从上方显示错误消息。

我登录时

console.log(this.$route.path);

在按钮上单击我会获得正确的路由- /用户/ ID ，但它没有更新任何内容。

更新：

正如Zdravko Pernikov所建议的那样，我输入了我的密码，它就起作用了：

<template>
    <div id="app">
        <div id="nav">
            <label>Welcome</label>

            <router-link to="/main">Welcome</router-link>

            <router-link to="/User">User</router-link>

        </div>
        <router-view :key="$route.path"/>
    </div>
</template>

Answer 1

之所以会发生这种情况，是因为您正在重用CurrentUser组件，并且由于已呈现，所以您没有在听更改。您可以尝试键入全局路由器视图<router-view :key="$route.path"></router-view>，将在不同的路由上重新渲染组件。

Vue路由器未重定向到正确的页面

1 个答案: