如何实现嵌套路由

简介: 如何实现嵌套路由

实现步骤

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>


相关文章
|
1月前
|
XML 前端开发 JavaScript
现代接口中的路由处理方式
【5月更文挑战第10天】本文介绍了FastAPI的路由和响应处理。它允许将查询参数如`skip`和`limit`用于URL,并自动进行类型转换和验证。路径装饰器允许配置操作,如添加元数据、响应模型和状态码。 介绍了使用通配符处理多种请求。I作为高性能接口框架的特点,还需根据需求评估其适用性。
100 10
现代接口中的路由处理方式
|
1月前
|
XML 前端开发 JavaScript
现代的接口路由处理方式
【5月更文挑战第14天】FastAPI允许绑定路由到路由组,处理查询参数,如`skip`和`limit`,支持默认值和可选参数。查询参数自动转换并校验类型。路径装饰器用于配置操作,如添加元数据、响应模型和状态码。 通配符(*)可用于允许所有源,但处理凭据时需谨慎。FastAPI提供高性能和灵活性,适合特定业务场景。
328 2
|
24天前
|
JavaScript 前端开发 UED
什么是嵌套路由
什么是嵌套路由
11 0
|
1月前
|
存储 小程序 程序员
嵌套的方式构建
嵌套的方式构建
13 0
|
1月前
|
前端开发
什么是嵌套路由?如何定义嵌套路由?
什么是嵌套路由?如何定义嵌套路由?
|
10月前
|
JavaScript
[Vue]嵌套(多级)路由
[Vue]嵌套(多级)路由
|
6月前
|
JavaScript
Vue 嵌套路由 多级路由规则
Vue 嵌套路由 多级路由规则
|
8月前
|
安全 API
路由的作用
路由的作用
37 1
|
11月前
|
前端开发 JavaScript
怎样实现路由封装
怎样实现路由封装
|
12月前
|
前端开发 Go
React 路由的使用以及bug规避:路由跳转、路由传参、嵌套路由
React 路由的使用以及bug规避:路由跳转、路由传参、嵌套路由
168 0