ルータを変更：URLは変更されましたが、親コンポーネントが表示されました

Question

私はVueを学習しており、ネストされたルータに固執していましたが、ルート内にいくつかの子ルータを定義しています。次

App.vue：

<template> 
    <div id="app"> 
    <img src="./assets/logo.png"> 
    <router-link :to="{name: 'Home'}">Home</router-link> 
    <router-link to="/cart">Cart</router-link> 
    <router-link to="/admin">Admin</router-link> 
    <router-link to="/admin/add">【Admin Add】</router-link> 
    <router-link to="/admin/edit">Admin Edit</router-link> 

    <router-view/> 
    </div> 
</template> 

<script> 
export default { 
    name: 'app' 
} 
</script> 

<style> 
#app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 60px; 
} 
</style> 

ルータ/ index.js：

import Vue from 'vue' 
import Router from 'vue-router' 
import Home from '@/components/pages/Home' 
import Cart from '@/components/pages/Cart' 
import Index from '@/components/pages/Admin/Index' 
import Add from '@/components/pages/Admin/Add' 
import Edit from '@/components/pages/Edit' 

Vue.use(Router) 

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'Home', 
     component: Home 
    }, 
    { 
     path: '/cart', 
     name: 'Cart', 
     component: Cart 
    }, 
    // { 
    // path: '/admin/index', 
    // name: 'Index', 
    // component: Index 
    // }, 
    // { 
    // path: '/admin/add', 
    // name: 'Add', 
    // component: Add 
    // }, 
    // { 
    // path: '/admin/edit', 
    // name: 'Edit', 
    // component: Edit 
    // } 
    { 
     path: '/admin', 
     // name: 'Admin', 
     component: Index, 

     children: [ 
     { 
      path: 'add', 
      name: 'Add', 
      component: Add 
     }, 
     { 
      path: 'edit', 
      name: 'Edit', 
      component: Edit 
     } 
     ] 
    } 
    ] 
}) 

私は子供のルータを使用しないようにしようとした、それだけで、正しくコンポーネントを表示します。コメントされたコードとして。

私はこのように混乱しています。私を助けてください。

Answer 1

Indexコンポーネントでは、<router-view></router-view>を追加する必要があります。このworking exampleをvue-router docsからチェックしてください。このリンクはあなたを助けるかもしれ

const User = { 
 
    template: ` 
 
    <div class="user"> 
 
     <h2>User {{ $route.params.id }}</h2> 
 
     <router-view></router-view> 
 
    </div> 
 
    ` 
 
} 
 

 
const UserHome = { template: '<div>Home</div>' } 
 
const UserProfile = { template: '<div>Profile</div>' } 
 
const UserPosts = { template: '<div>Posts</div>' } 
 

 
const router = new VueRouter({ 
 
    routes: [ 
 
    { path: '/user/:id', component: User, 
 
     children: [ 
 
     // UserHome will be rendered inside User's <router-view> 
 
     // when /user/:id is matched 
 
     { path: '', component: UserHome }, 
 
\t \t \t \t 
 
     // UserProfile will be rendered inside User's <router-view> 
 
     // when /user/:id/profile is matched 
 
     { path: 'profile', component: UserProfile }, 
 

 
     // UserPosts will be rendered inside User's <router-view> 
 
     // when /user/:id/posts is matched 
 
     { path: 'posts', component: UserPosts } 
 
     ] 
 
    } 
 
    ] 
 
}) 
 

 
const app = new Vue({ router }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <p> 
 
    <router-link to="/user/foo">/user/foo</router-link> 
 
    <router-link to="/user/foo/profile">/user/foo/profile</router-link> 
 
    <router-link to="/user/foo/posts">/user/foo/posts</router-link> 
 
    </p> 
 
    <router-view></router-view> 
 
</div>