VueRouter 20 - 路由嵌套

最新推荐文章于 2024-01-19 18:16:04 发布

前端小萝莉

最新推荐文章于 2024-01-19 18:16:04 发布

阅读量274

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端框架

本文链接：https://blog.csdn.net/xx661660/article/details/125614692

版权

本文介绍了如何在Vue应用中实现路由嵌套。通过在App.vue组件中设置路由渲染出口，实现一级路由如Login、Register和Home。接着在Home组件内进行嵌套路由配置，通过在路由对象中添加children属性来定义二级路由，如/home/student，从而在Home组件内部根据路径加载相应子组件，无需再次写全路径。

摘要由CSDN通过智能技术生成

目前我们搭建好了一级路由。

Login组件、Register组件、Home组件，

App.vue这个组件里面有一个路由渲染出口，在这个地方检测一级路由匹配会在App.vue渲染指定要加载组件

/home只能进入Home这个组件，进入这个组件匹配路径是否还有其他路由 /home/student

一、在Home页面中找到路由渲染出口

<div class="rightContent">
<!-- 显示内容 -->
<!-- <button @click="$router.go(-1)">回退上一级</button> -->
<!-- 二级路由渲染出口 -->
<router-view></router-view>
</div>

二、配置嵌套路由规则

const routes = [
{
path:"/",
redirect:"/login"
},
{
path: '/login',
component: Login
},
{
path: '/register',
name:"Register",
component:()=>import("@/views/Register.vue")
},
{
path: '/home',
name:"Home",
component:Home,
children