大家好，我是学前端的菜鸟小番茄~

先了解路由才能进一步了解嵌套路由

先创建一个路由模块

嵌套路由是什么？

嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。(通过路由实现组件的嵌套展示，叫做嵌套路由。)

优点：让新的页面内容展示在父组件的占位符（即router-view标签）中，这样有利于页面结构的搭建，结构清晰。

举例

juejin.cn/recommended

juejin.cn/following

以上就是嵌套路由实现的效果

代码层面

如何实现嵌套路由

路由嵌套，即在当前路由中注册子路由中，形成父子结构（灵魂！！！！！）

举例如下图所示

具体步骤

• 第一步先引入该路由页面（两种引入方法如下图）

• 第二步配置路由

• 第三步.路由对应的组件中添加router-view标签里需要路由的地方 写（实现基本的跳转）

//       两种方法
<template>
    <div class="box3">
        <h1>home</h1>
        <!-- 方法一 -->
        <router-link to="/login/ss">通过router-link标签转跳</router-link>
        <!-- 方法二 -->
        <button @click="rto">通过$router.push转跳</button>
 
        <router-view></router-view>
    </div>
</template>

注意：

在父路由模板里面写子路由链接的时候注意子路由链接的地址( ‘/父/子’ ),另外还要注意子路由链接后面加上路由占位符，要不然组件渲染不出来