Vue children 라우터 : 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>을 추가해야합니다. vue-router docs에서이 working example을 확인하십시오. 이 링크는 당신을 도울 수

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>