Vue Router（一）问题之嵌套命名视图的实现

链接地址：https://router.vuejs.org/zh/guide/#html

官方代码地址：https://jsfiddle.net/posva/22wgksa3/

---

今天在做路由跳转的过程中，遇到一个问题。因为我的目录是这样的，所以我想的路由需要写一个父路由，然后使用children在写子路由。

结构如下：

路由配置如下：

const routes = [
  {
    path: '/member',
    name: '个人中心企业版',
    component: memberNews,
    children: [
      {
        path: 'cart',
        name: '购物车',
        component: cart,
      },
      {
        path: 'company',
        name: '公司信息',
        component: company,
        children: [
          {
            path: 'basic',
            name: '基本信息',
            component: basic
          },
          {
            path: 'business',
            name: '业务信息',
            component: business
          },
          {
            path: 'contact',
            name: '联系人信息',
            component: contact
          },
        ]
      },
    ],
  },
]

然后在页面中我的路由写的也没有问题。

<el-menu-item-group title="订单中心">
	<template slot="title">订单中心</template>
	<el-menu-item index="/member">我的购物车</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="会展中心">
	<template slot="title">会展中心</template>
	<el-menu-item index="/member/cart">我报名的会展</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="产品中心">
	<template slot="title">产品中心</template>
	<el-menu-item index="3">发布产品</el-menu-item>
	<el-menu-item index="4">我的产品</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="贸易中心">
	<template slot="title">贸易中心</template>
	<el-menu-item index="5">发布信息</el-menu-item>
	<el-menu-item index="6">我的贸易信息</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="公司信息">
	<template slot="title">公司信息</template>
	<el-menu-item index="/member/basic">基本信息</el-menu-item>
	<el-menu-item index="/member/business">业务信息</el-menu-item>
	<el-menu-item index="/member/contact">联系人信息</el-menu-item>
</el-menu-item-group>

然后页面跳转时路由地址是没有问题的，但是对于的内容显示不出来。

 

---

不知道问题出在哪里，然后看了下官方文档中对于的案例。

思考再三，不知道为什么这么写？自己也尝试着在父路由的对应组件中写了一个<router-view>，然后发现了新世界！！

---

---

可以发现子路由对应的组件内容在父组件中显示了出来。

所以，就明白了children里面写的子路由是父级路由中跳转的内容项，而不是我们常规思维所理解的目录的结构。所以说，我们应该把该跳转的组件路由都提取到外面，让他们互相独立才可以。

如果我们需要是父子组件路由嵌套的关系，一定记得在父组件的页面适当的地方添加<router-view></router-view>.

---