Vue嵌套路由加重定向实现侧边栏路由跳转

记录一下自己对嵌套路由的理解
我的博客需要头脚和侧边栏不变，点击相应标签网页中间切换内容，一种方法是写多个页面每一个都包括了网页的头尾侧边栏等内容，但这样显然不是个很好的处理方法，所以就用到了嵌套路由。
首先路由要显示内容需要<router-view>，在app.vue会有一个顶层的view，它用来显示页面中不变的部分，然后在home页你要显示可切换内容的地方再添加一个<router-view>，我的部分代码如下：

//home页

<div class="home">
    <div class="contain">
      <div class="head">
       
      </div>

      <div class="container">
        <div class="aside">
          
        </div>

        <div class="main">
          <router-view/>
        </div>
      </div>
      <div class="foot">
     
      </div>
    </div>
  </div>

接下来去配置vue-router，首先创建好自己的组件页面，然后引入到路由里，设置children

export default new Router({
    routes: [{
        path: '/',
        redirect: 'home'
    }, {
        path: '/home',
        redirect: '/home/articleList',
        name: 'home',
        component: Home,
        children: [{
            path: '/home/articleList', component: () => import('@/views/ArticleList')
        }, {
            path: "/home/articleEdit", component: () => import('@/views/ArticleEdit')
        },]
    }]
})

顺便说一下redirect重定向，它可以让你进入项目以后直接改变url到重定向指向的地址，我进入’/'路径后直接进入home页，然后home再重定向到他的子路由，这样就实现了我想要的效果。