vue路由嵌套，配置children嵌套路由

vue路由嵌套，配置children嵌套路由 2022-08-21 476

嵌套路由就是路由里面嵌套他的子路由，可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套

//mine组件
<template>
    <div class="content">
        在mine的组件里面嵌套路由
        <router-link to="/mine/c">去到Cpage</router-link>
        <router-link to="/mine/d">去到Dpage</router-link>
        <div class="child">
            <router-view></router-view>
        </div>
    </div>
</template>

//router.js
//引入需要的组件，下是我的路径
import Vue from vue
import Router from vue-router
import Home from @/components/home
import Mine from @/components/mine
import Cpage from @/page/mine/c
import Dpage from @/page/mine/d
Vue.use(Router)

export default new Router({
  routes: [
    {   
        path: /,
        redirect: home
    },
    {
      path: /home,
      name: home,
      component: Home
    },
    {
      path: /mine,
      name: Mine,
      component：Mine,
      children:[
        {
            path:/,
            component:Cpage,
        },
        {
            path:/mine/c,
            component:Cpage,
        },
        {
            path:/mine/d,
            component:Dpage,
        }
      ]
      //children这是嵌套的部分
    },

//c.vue
<template>
    <div class="top-80">
        c.vue
        <p>这里Cpage文件</p>
    </div>
</template>


//d.vue
<template>
    <div class="top-80">
        d.vue
        <p>这里Dpage文件</p>
    </div>
</template>