子路由里嵌套子路由、嵌套多重子路由

子路由里嵌套子路由、嵌套多重子路由

子路由嵌套子路由

第一级子路由 Main.vue

<template>
    <div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;">
      这是一级路由
      <router-view></router-view>
    </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

第二级子路由 home.vue

<template>
  <div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;">
    这是二级路由
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    }
  }
</script>

第三级子路由 hello.vue

<template>
  <div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;">
    这是三级路由
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    }
  }
</script>

 

router里的路由配置

import Vue from 'vue'
import Router from 'vue-router'
// import Main from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/main', //第一级子路由的可以单是 '/'这样访问路径里可以没有‘/main’
      name: 'Main',
      component: resolve => require(['../components/Main.vue'], resolve),
      meta: { title: '第一级子路由' },
      children: [
        {
          path: 'home',
          name: 'Home',
          component: resolve => require(['../components/home/home.vue'], resolve),
          meta: { title: '第二级子路由' },
　　　　　　redirect: '/main/home/hello',
          children: [
            {
              path: 'hello',
              name: 'Hello',
              component: resolve => require(['../components/home/hello.vue'], resolve),
              meta: { title: '第三级子路由' }
            }
          ]
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: resolve => require(['../components/Login.vue'], resolve)
    }
  ]
})

 

posted @ 2019-02-14 10:53 或许这就是生活 阅读( ...) 评论( ...) 编辑 收藏