在写嵌套路由时，父路由为hi，子路由为hi2，hi3,修改前在router中是这样写的：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      component: Hi,
      alias: '/greet',
      children: [
        {path: 'hi2',name: 'hi2',component: Hi2},
        {path: 'hi3', component: Hi3}
      ]
    },

运行之后会发现，当点击hi3的链接跳转到hi3时，会出现hi的内容。如下，第一行是hi组件的内容，而第二行是hi3组件的内容。

父路由hi被重复渲染，从嵌套路由的写法也可以看出。

要改变这种父路由被重复渲染的情况，就要从嵌套路由处进行修改。

在componts中新建一个common.vue组件，在组件中写入下面内容：

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

 修改router文件中的内容，对component进行修改：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      component: common,
      alias: '/greet',
      children: [
        {path: '', component: Hi},
        {path: 'hi2', name: 'hi2', component: Hi2},
        {path: 'hi3', component: Hi3}
      ]
    },

修改后的效果：