невозможно перейти к вложенному маршруту, но URL браузера обновляется

Question

У меня есть несколько простых страниц CRUD для пользователей (и использую Vuetify). Поэтому

• / пользователи будут отображать список пользователей
• / users /: id будет отображать профиль пользователя

После настройки моих вложенных маршрутов в Конфигурация маршрутизатора Я перехожу к этим вложенным маршрутам, но отображаемое в данный момент представление не обновляется, хотя URL браузера обновляется. Шаги для воспроизведения:

1. Создание нового проекта Vue с Vue Маршрутизатор
2. Добавление Vuetify к проекту
3. Обновление файла приложения. vue до

.

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

Создание представления пользователей

.

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

Создать представление пользователя

.

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

Настройка маршрутов

.

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

Запустите приложение и вызовите root url (http://localhost:8080) Вы должны будете перенаправлены на /users Нажмите кнопку URL получит обновлено, но приложение не будет переходить к представлению пользователя

Как это исправить? Я ожидаю, что визуализированное представление пользователя для http://localhost:8080/users/1

Answer 1

Я думаю, что вы неправильно понимаете идею вложенного маршрута, при использовании пути children к компоненту он попытается отобразить children в <router-view> этого компонента. Это будет означать, что он попытается отобразить представление Пользователь в компонентах <router-view> из Пользователи (не Приложение. vue), но это не так. найдено в Users , поэтому ничего не происходит.

Дополнительную информацию можно найти здесь: https://router.vuejs.org/guide/essentials/nested-routes.html

Для того, чтобы заархивировать вашу цель

/ пользователи будут отображать список пользователей

/ users /: id будет отображать профиль пользователя

Я думаю, вы можете определить Users и User компонент по-другому, как это в маршрутах. js:

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

Answer 2

Если вы определяете дочерний маршрут, вы должны объявить <router-view></router-view> в родительском компоненте.

Users. vue

<template>
  <div>
    Users Page
    <router-view></router-view>   // ---> define this
  </div>
</template>

Пользователь. vue

<template>
  <div>
    USER {{ $route.params.id }}
  </div>
</template>

Дайте мне знать, если это поможет.