Vue路由器-嵌套路由,嵌套路由内

时间:2020-07-01 01:02:05

标签: vue.js vuetify.js vue-router

我想在其他嵌套路由内添加一个嵌套路由。我知道应该使用命名的路由,并且在上一次尝试中,我使路由中的URL正确更改,但是未加载我设置的组件。在线检查,但找不到使其工作的方法。我的路线和组件结构:

路由器:

 {
  path: "/login",
  name: "Login",
  component: Login,
  meta: {
    requiresGuest: true,
  },
},
{
  path: "/admin",
  name: "Admin",
  beforeEnter: checkAdminRights,
   
  component: Admin,
  children: [
    {
      path: "/",
      name: "welcome",
      beforeEnter: checkAdminRights,
      component: Welcome,
      meta: {
        requiresAuth: true,
      },
    },
    {
      path: "userspanel",
      name: "userspanel",
      beforeEnter: checkAdminRights,
      component: UsersPanel,
   
      children:[
        {
          path: 'history/:user_id',
          name: 'history',
          component: {a: History},
        
        }
      ]
    },

UsersPanel.vue

      <div>
    <v-simple-table class="mt-5">
      <thead>
        <tr>
          <th class="text-left">Name</th>
          <th class="text-left">Email</th>
          <th class="text-left">Gender</th>
          <th class="text-left">History</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.gender }}</td>
          <td>
            <router-link
              :to="{ name: 'history', params: { user_id: user.user_id } }"
            >
              <v-icon>mdi-file</v-icon>
            </router-link>
          </td>
        </tr>
      </tbody>
    </v-simple-table>

    <v-content>
      <v-container fluid>
        <router-view name="a" :key="$route.fullPath"></router-view>
      </v-container>
    </v-content>

    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>

Admin.vue(已设置主视图路由器)

  <v-app-bar
  :clipped-left="$vuetify.breakpoint.lgAndUp"
  app
  color="blue darken-3"
  dark
>
  <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  <v-toolbar-title style="width: 300px" class="ml-0 pl-4">
  </v-toolbar-title>

  <v-spacer></v-spacer>
  Logout
  <v-btn icon @click="logout">
    <v-icon>mdi-logout</v-icon>
  </v-btn>
</v-app-bar>
<v-content>
  <v-container fluid>
    <router-view />
  </v-container>
</v-content>

<v-dialog v-model="dialog" width="800px"> </v-dialog>

History.vue

<template>
  <div>
    <h1>History Section</h1>
    <v-card class="mx-auto" max-width="344" outlined>
      <v-list-item three-line>
        <v-list-item-content>
          <div class="overline mb-4">OVERLINE</div>
          <v-list-item-title class="headline mb-1"
            >Headline 5</v-list-item-title
          >
          <v-list-item-subtitle
            >Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle
          >
        </v-list-item-content>

        <v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
      </v-list-item>

      <v-card-actions>
        <v-btn text>Button</v-btn>
        <v-btn text>Button</v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style></style>

屏幕截图

enter image description here

谢谢!

0 个答案:

没有答案