Vue-router嵌套路由的使用

路由使用的时候需要设置路由的路径：

ew Router({
  // mode: 'abstract',
  routes: [
    { path: '/top', component: Top },
    { path: '/new', component: New },
    { path: '/', redirect: '/top' }
  ]
})

然后设置路由要渲染的标签：

在切换路由路径的时候使用push：

// Vue.mixin 混合是一种灵活的分布式复用 Vue 组件的方式，所有混合对象的选项将被混入该组件本身的选项，
// 因此上述代码实现为Vue组件增加jump方法，而jump的核心就是路由的跳转。mixin后，可以在vue组件里使用jump方法。
// 例如：

export default {
  methods: {
    jump (to) {
      if (this.$router) {
        this.$router.push(to)
      }
    }
  }
}

嵌套路由

如果要使用嵌套路由，也就是如果在上面的例子中Top组件里面使用路由咋办？

例如top组件如下：

如果要在top中也使用这个路由的话则在Router的配置中增加一个children字段，这样在children中的child就可以被渲染在top中的路由了：

如下：

export default new Router({
  // mode: 'abstract',
  routes: [
    { path: '/main', component: Main, children: [
      { path: '/main/home', component: Home},
      { path: '/main/customer', component: Customer},
      { path: '/main/record', component: Record},
      { path: '/main/executive', component: Executive}
    ]},
    { path: '/', redirect: '/main/home' }
  ]
});