Vue框架中的嵌套路由分发

        首先这里的文件的结构是这样的，我是创建了一个node项目，在项目中进行制作的。这个嵌套比较典型就写一下。 

在进行的时候还需要安装几个包，router和vue-router，们这里都要是vue2的版本的。

1、首先这里的是main.js的文件，这里的作用是导入路由分发的包。

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import VueRouter from "vue-router"

// Vue.config.productionTip = false

Vue.use(VueRouter);
new Vue({
  render: h => h(App),
  router: router,
}).$mount('#app')

2、之后来写component组件

• 在这里要注意的是下一个路由的呈现的位置是通过加上<router-view><router-view>实现的，不然就无法显示后面嵌套的子组件，会卡在没有加的地方，无法继续路由下去。

首先的是根实例：App.Vue文件。

<template>
  <div id="app">
    <h2>vue router demo</h2>
    <!--    router-link实现路由切换-->
    <router-link to="/province" active-class="active">省</router-link>

    <!--    指定呈现位置-->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.active{
  background-color: blue;
}
</style>

之后是子组件： 

##########这是province的组件###########
<template>
  <div>
    <h2>我是省！</h2>
    <router-link to="/province/city" active-class="active">城市</router-link>
    <router-view></router-view>
  </div>
</template>

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



##########这是city的组件###########
<template>
  <div>
  <h2>我是城市！</h2>
  <router-link to="/province/city/school" active-class="active">学校</router-link>
    <router-view></router-view>
  </div>
</template>

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



##########这是school的组件###########
<template>
  <div>
  <h2>我是学校！</h2>
    <router-link to="/province/city/school/student" active-class="active">学生</router-link>
    <router-view></router-view>
  </div>
</template>

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


##########这是student的组件###########
<template>
  <h2>我是学生！</h2>
</template>

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

3、这里就开始写 index.js文件，用来进行路由的分发。

• 这里的是路由的多层单次的嵌套。

import VueRouter from "vue-router";
import School from "@/pages/school.vue";
import Province from "@/pages/province.vue";
import Student from "@/pages/student.vue";
import City from "@/pages/city.vue";

export default new VueRouter({
    routes: [
        {path: "/province", component: Province,
            children: [{path: "city", component: City,
                children: [{path: "school", component: School,
                    children: [{path: "student", component: Student,}]
                },]
            },]
        },
    ]
})

最后的效果就是：