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

子路由嵌套子路由

第一级子路由 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) } ] })

 

猜你喜欢

转载自www.cnblogs.com/aidixie/p/10373353.html
0条评论
添加一条新回复