zoukankan      html  css  js  c++  java
  • 子路由里嵌套子路由、嵌套多重子路由

    子路由嵌套子路由

    第一级子路由 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) } ] })
  • 相关阅读:
    CodeForces 219D Choosing Capital for Treeland (树形DP)
    POJ 3162 Walking Race (树的直径,单调队列)
    POJ 2152 Fire (树形DP,经典)
    POJ 1741 Tree (树的分治,树的重心)
    POJ 1655 Balancing Act (树的重心,常规)
    HDU 2196 Computer (树形DP)
    HDU 1520 Anniversary party (树形DP,入门)
    寒门子弟
    JQuery选择器(转)
    (四)Web应用开发---系统架构图
  • 原文地址:https://www.cnblogs.com/aidixie/p/10373353.html
Copyright © 2011-2022 走看看