[JavaScript知识库]通过vue快速搭建，创建子路由

继续上文中我们完成了一个由pageone和pagetwo的路由搭建

具体的上文请打开https://blog.csdn.net/wangzhen12138/article/details/119250222查看?

?如图上所示那么我们将在页面二中创造出三个子页面，方法如下

首先在我们vuecli文件中的views文件中创建ChildOne.vue\ChildTwo.vue\ChildThree.vue三个文件

最好用我们的驼峰命名法

?代码如下所示

如下是我们的childone代码段

<template>
    <div>
        <h1>{{msg}}</h1>//使用vue的基本语句来进行传参
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg:"",
        }
    },
    created(){
        let str=this.$route.params.userName;
        this.msg=str;
        console.log(str);
    }
}
</script>

?下面我们来看index.js的代码段，在pagetwo中我们要添加children【】

那么我们在children中添加的代码段就是我们的子路由

 {
    path: '/pagetwo',
    name: 'PageTwo',
    component: () =>   import('../views/pageTwo.vue'),
    children: [
      {
        path: 'childone',
        name: 'ChildOne',
        component: () => import('../views/ChildOne.vue')
      },
      {
        path: 'childtwo',
        name: 'Childtwo',
        component: () => import('../views/ChildTwo.vue')
      },{
        path:'childthree/:username',
        name:'ChildThree',
        component:()=>import('../views/ChildThree.vue')
      }
    ]
  }

?在我们的路由中我们将我们的三个子路由的path和name以及我们的组件路径都设置好

那么在我们的pagetwo中我们通过vuelink的方法将我们的三个子路由添加到我们的pagetwo中

具体代码如图所示

<template>
    <div>
        <h1> 页面二</h1>
        <div>
            <!--<router-link to="/pagetwo/childone">子页面一</router-link> |--> 
             <!--<router-link to="/pagetwo/childtwo">子页面二</router-link> |--> 
              <!--<router-link to="/pagetwo/childthree">子页面三</router-link> |--> 
            
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

那么下面我们的代码就可以像下面这样来回切换了

?