vue router 多路由及路由嵌套

在 vue 中使用 router 进行前端路由，可实现不跳转切换页面或局部切换页面，而且往往需要进行局部切换页面的地方不止一个，此时就需要用到 多路由 或 路由嵌套 来实现。

1、简单路由（单路由）

• App.vue:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

• Test.vue:

<template>
  <div id="testModule">
    <p>我是 test 组件页面</p>
  </div>
</template>

<script>
export default {
    name: 'TestModule'
}
</script>

• router.js

import Vue from 'vue'
import Router from 'vue-router'

import TestModule from '@/components/Test'

Vue.use(Router)

export default new Router({
  routes: [
      {
          path: '/',
          name: 'Test',
          component: TestModule
      }
  ]
})

2、多路由

一个页面存在多个路由时，除了默认路由以外，其余路由通过属性 ‘name’ 来做区分。

• App.vue:

<template>
  <div id="app">
    <router-view />
    <router-view name="test2" />
  </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

• Test.vue:

<template>
  <div id="testModule">
    <p>我是 test 组件页面</p>
  </div>
</template>

<script>
export default {
    name: 'TestModule'
}
</script>

• Test2.vue:

<template>
  <div id="testModule2">
    <p>我是 test 2 组件页面</p>
  </div>
</template>

<script>
export default {
    name: 'TestModule2'
}
</script>

• router.js

import Vue from 'vue'
import Router from 'vue-router'

import TestModule from '@/components/Test'
import TestModule2 from '@/components/Test2'

Vue.use(Router)

export default new Router({
  routes: [
      {
          path: '/',
          name: 'Test',
          components: {
              default: TestModule,  // 默认路由
              test2: TestModule2    // name 为 'test2' 的路由
          }
      }
  ]
})

3、嵌套路由

一个路由里面的子组件中，还存在另一个路由，这时就成为了嵌套的路由。

• App.vue:

<template>
  <div id="app">
    <router-view />
    <router-view name="test2" />
  </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

• Test.vue:

<template>
  <div id="testModule">
    <p>我是 test 组件页面</p>
    
    <div>下面是子组件的路由</div>
    <router-view name="testSub" />
  </div>
</template>

<script>
export default {
    name: 'TestModule'
}
</script>

• TestSub.vue:

<template>
  <div id="testModuleSub">
    <p>我是 test sub 组件页面</p>
  </div>
</template>

<script>
export default {
    name: 'TestModuleSub'
}
</script>

• Test2.vue:

<template>
  <div id="testModule2">
    <p>我是 test 2 组件页面</p>
  </div>
</template>

<script>
export default {
    name: 'TestModule2'
}
</script>

• router.js

import Vue from 'vue'
import Router from 'vue-router'

import TestModule from '@/components/Test'
import TestModuleSub from '@/components/TestSub'

import TestModule2 from '@/components/Test2'

Vue.use(Router)

export default new Router({
  routes: [
      {
          path: '/',
          name: 'Test',
          components: {
              default: TestModule,  // 默认路由
              test2: TestModule2    // name 为 'test2' 的路由
          },
          children: [  // 子路由嵌套
              {
                  // 通过 'http://ip/testsub/' 来访问子路由
                  path: 'testsub',
                  components: {
                      // TestModule 里面 name 为 'testSub' 的路由
                      testSub: TestModuleSub
                  }
              }
          ]
      }
  ]
})