路由更改时组件不加载

Question

我想用它的子路由创建一个嵌套路由。

基本上我想要的是，

https://localhost/contact 渲染 ContactList 组件。

https://localhost/contact/add 渲染 ContactAdd 组件。

我试过的是：

let Layout = {
  template: '<div>Layout Page <router-view></router-view></div>'
};
let Home = {
  template: '<div>this is the home page. Go to <router-link to="/contact">contact</router-link> </div>'
};

let ContactList = {
  template: '<div>this is contact list, click <router-link to="/contact/add">here</router-link> here to add contact</div>'
};

let ContactAdd = {
  template: '<div>Contact Add</div>'
}

let router = new VueRouter({
  routes: [{
    path: '/',
    redirect: 'home',
    component: Layout,
    children: [{
        path: 'home',
        component: Home
      },
      {
        path: 'contact',
        component: ContactList,
        children: [{
          path: 'add',
          component: ContactAdd
        }]
      },
    ]
  }]
});

new Vue({
  el: '#app',
  components: {
    'App': {
      template: '<div><router-view></router-view></div>'
    },
  },
  router
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>

在这里，问题是当我将路由从/client 更改为/client/add 时，视图不会呈现。这里嵌套的儿童路线有什么问题？如何解决这个问题？

我查看了此文档 https://router.vuejs.org/guide/essentials/nested-routes.html，但在这种情况下没有帮助。

Answer 1

你需要在<ContactList>的模板中添加一个<router-view>来加载它的子路由。

或者，如果您想在 Layout 中显示 ContactAdd，请将 ContactAdd 移动到 path=/ 的直接子级。

let Layout = {
  template: '<div>Layout Page <router-view></router-view></div>'
};
let Home = {
  template: '<div>this is the home page. Go to <router-link to="/contact">contact</router-link> </div>'
};

let ContactList = {
  // add <router-view> in order to load children route of path='/contact'
  template: '<div>this is contact list, click <router-link to="/contact/add">Add Contact In sub Router-View</router-link> here to add contact<p><router-view></router-view></p> Or Click <router-link to="/addcontact">Add Contact In Current Router-View</router-link></div>'
};

let ContactAdd = {
  template: '<div>Contact Add</div>'
}

let router = new VueRouter({
  routes: [{
    path: '/',
    redirect: 'home',
    component: Layout,
    children: [{
        path: 'home',
        component: Home
      },
      {
        path: 'contact',
        component: ContactList,
        children: [{
          path: 'add',
          component: ContactAdd
        }]
      },
      {
        path: 'addcontact', // or move ContactAdd as direct child route of path=`/`
        component: ContactAdd,
      }
    ]
  }]
});

new Vue({
  el: '#app',
  components: {
    'App': {
      template: '<div><router-view></router-view></div>'
    },
  },
  router
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>