如何实现嵌套路由

简介: 如何实现嵌套路由

实现步骤

1. 新建子页面

2. 在router/index.js中的父路由节点添加children数组

3. 在children中添加子路由

{
    path: '/',
    name: 'home',
    component: HomeView,
    children: [
{
            path: '/pageA',
            name: 'pageA',
            component: pageA
       },
       {
            path: '/pageB',
            name: 'pageB',
            component: pageB
       }
   ]
},

5.在父路由页面添加 路由出口

<template>
    <div>
        <RouterLink to="/pageA">A页面</RouterLink>|
        <RouterLink to="/pageB">B页面</RouterLink>
        <div style="border: 1px #000 solid;">子页面将输出到这里:
            <RouterView />
        </div>
    </div>
</template>


相关文章
|
20天前
|
JavaScript 前端开发 测试技术
Redux 动态路由与传统路由的区别
【10月更文挑战第22天】Redux 动态路由在路由状态管理、数据加载与关联、组件渲染与更新、路由参数处理、导航与历史管理、可测试性以及代码结构与可维护性等方面都具有明显的优势,能够为开发者提供更强大、更灵活和更易于维护的路由解决方案,尤其适用于大型复杂的前端应用开发。
30 2
|
1月前
|
缓存 JavaScript 前端开发
vue-router学习二:动态路由(路由传递数据的一种方式),路由懒加载,嵌套路由,路由传递参数方式,导航守卫,keep-alive标签
这篇文章主要介绍了Vue Router的高级用法,包括动态路由、路由懒加载、嵌套路由、路由参数传递、导航守卫以及keep-alive的使用。
35 0
vue-router学习二:动态路由(路由传递数据的一种方式),路由懒加载,嵌套路由,路由传递参数方式,导航守卫,keep-alive标签
|
6月前
|
XML 前端开发 JavaScript
现代接口中的路由处理方式
【5月更文挑战第10天】本文介绍了FastAPI的路由和响应处理。它允许将查询参数如`skip`和`limit`用于URL,并自动进行类型转换和验证。路径装饰器允许配置操作,如添加元数据、响应模型和状态码。 介绍了使用通配符处理多种请求。I作为高性能接口框架的特点,还需根据需求评估其适用性。
122 10
现代接口中的路由处理方式
|
6月前
|
XML 前端开发 JavaScript
现代的接口路由处理方式
【5月更文挑战第14天】FastAPI允许绑定路由到路由组,处理查询参数,如`skip`和`limit`,支持默认值和可选参数。查询参数自动转换并校验类型。路径装饰器用于配置操作,如添加元数据、响应模型和状态码。 通配符(*)可用于允许所有源,但处理凭据时需谨慎。FastAPI提供高性能和灵活性,适合特定业务场景。
348 2
|
5月前
|
JavaScript 前端开发 UED
什么是嵌套路由
什么是嵌套路由
38 0
|
6月前
|
存储 小程序 程序员
嵌套的方式构建
嵌套的方式构建
27 0
|
JavaScript
[Vue]嵌套(多级)路由
[Vue]嵌套(多级)路由
|
6月前
|
前端开发
什么是嵌套路由?如何定义嵌套路由?
什么是嵌套路由?如何定义嵌套路由?
|
安全 API
路由的作用
路由的作用
61 1
|
11月前
|
JavaScript
Vue 嵌套路由 多级路由规则
Vue 嵌套路由 多级路由规则