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

Question

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

/users 将呈现用户列表

/users/:id 将呈现用户配置文件

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

使用 Vue Router 创建一个新的 Vue 项目

将 Vuetify 添加到项目

将 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

点击按钮

url 得到更新，但应用程序不会导航到用户 View

我该如何解决？我希望为 http://localhost:8080/users/1 呈现用户 View

Answer 1

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

更多信息可以在这里找到: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
  }
]