(5)vue嵌套路由的小案例

第一首先有两个页面（组件）

在src/views目录下添加father.vue,son.vue

father.vue文件

<script setup>

</script>

<template>

<div style="padding: 20px;background-color: yellow" >

  嵌套路由，父组件

</div>

  <div style="padding: 20px;background-color: #0066bc">

    <RouterView/>

  </div>

</template>

注意<RouterView/>决定父级路由将渲染子级路由也就是，访问father/son，第二个div中有son。没有就不渲染。

son.vue文件

<script setup>

</script>

<template>

  <div>

    son

  </div>

</template>

第二路由配置

在src/router/index.js

  { path:'/father',name: 'father', component: () => import('../views/Father.vue'),

        children:[

            { path:'son',name: 'son', component: () => import('../views/Son.vue')},//相当于你访问的是/father/son

        ]

      }

注意children是一个数组对象，也就表明父级路由可以有多个子级路由，

子级路由的path属性不能在第一个位置’/’加了会找不到路由

第三演示

运行项目访问/father/son看看

个人理解：其实嵌套路由作用就是访问子级路由会展示父级路由的内容。

哈哈你学会了吗？