vue.js - 无法导航到嵌套路由，但浏览器 URL 已更新

Question

我为用户提供了一些简单的 CRUD 页面(并使用 Vuetify)。所以

• /users 将呈现用户列表
• /users/:id 将呈现用户个人资料

在路由器配置中设置嵌套路由后，我正在导航到这些嵌套路由，但尽管浏览器 URL 已更新，但我当前渲染的 View 并未更新。重现步骤:

1. 使用 Vue Router 创建一个新的 Vue 项目
2. 将 Vuetify 添加到项目
3. 将 App.vue 文件更新为

.

<template>
  <v-app>
    <router-view></router-view>
  </v-app>
</template>

创建用户 View

.

<template>
  <v-btn to="/users/1">Navigate</v-btn>
</template>

创建用户 View

.

<template>
  <p>User</p>
</template>

设置路线

.

const routes = [
  {
    path: "/",
    redirect: "/users"
  },
  {
    path: "/users",
    component: Users,
    children: [
      {
        path: ":id",
        component: User
      }
    ]
  }
];

运行应用程序并调用根 URL (http://localhost:8080)

您应该被重定向到 /users

点击按钮

网址已更新，但应用程序不会导航到用户 View

我该如何解决这个问题？我期望 http://localhost:8080/users/1

呈现用户 View

Answer 1

我认为您在使用 children 时误解了嵌套路由的概念组件的路径，它将尝试渲染 children在 <router-view>该组件的。这意味着它将尝试在 <router-view> 中呈现 User View 。 Users 组件(不是 App.vue)，但在 Users 中找不到任何组件，所以这就是为什么没有发生任何事情。

更多信息可以在这里找到:https://router.vuejs.org/guide/essentials/nested-routes.html

为了实现你的目标

/users will render the users list

/users/:id will render the user profile

我认为你可以定义Users和User成分不同 就像在routes.js中这样:

const routes = [
  {
    path: '/',
    redirect: '/users'
  },
  {
    path: '/users',
    component: Users
  },
  {
    path: '/users/:id',
    component: User
  }
]