Pinia+Router学习笔记(十一)

简介: 本节记录嵌套路由&命名视图相关内容

嵌套路由

嵌套路由即二级路由,作用在本身就是路由组件的组件中,可以提供无需刷新的部分页面跳转

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/user',
    name: 'Login',
    component: () => import('../components/footer.vue'),
    children: [
      {
        path: '',
        name: 'Login',
        component: () => import('../components/login.vue'),
      },
      {
        // 注意:这里的路径不能带有/,带有/的路径会被默认解析成根路径
        path: 'reg',
        name: 'Reg',
        component: import('../components/reg.vue'),
      },
    ],
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router
<template>
    <div>
        <router-view></router-view>
        <hr />
        <h1>我是父路由</h1>
        <div>
<!--       通过router-link跳转,如果有需要也可以使用编程式路由导航 -->
            <router-link to="/user">login</router-link>
            <br>
            <router-link to="/user/reg">Reg</router-link>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

</script>

<style scoped></style>

命名视图

在router配置文件中可以利用components配置项定义一些视图,当URL处于对应页面并且组件中具有与之相对应的router-view name属性时将这些组件挂载到页面上

<template>
  <div>
    <hr />
    <h1>我是父路由</h1>
    <div>
      <router-view></router-view>
      <router-view name="user1"></router-view>
      <router-view name="user2"></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'

</script>

<style scoped></style>
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        component: () => import('../components/footer.vue'),
        children: [
            {
                path: '',
                name: 'Login',
                components: {
                  // 当url为/且footer.vue中有<router-view>时挂载(没有name属性,因为是default)
                    default: () => import('../components/B.vue'),
                },
            },
            {
                path: 'reg',
                name: 'Reg',
                components: {
                  // 当url为/reg且具备对应的<router-view name="组件名">时挂载
                    user1: () => import('../components/login.vue'),
                    user2: () => import('../components/reg.vue'),
                },
            },
        ],
    },
]


const router = createRouter({
    history: createWebHashHistory(),
    routes,
})


export default router

效果图:
image.png
image.png

相关文章
|
小程序 JavaScript 前端开发
微信小程序前后端交互与WXS的应用
微信小程序前后端交互与WXS的应用
382 0
|
6月前
|
搜索推荐 数据挖掘 数据安全/隐私保护
频率派与贝叶斯统计在营销组合建模中的应用比较:隐私优先时代的方法选择
营销组合建模(MMM)是量化营销渠道贡献的核心工具,在数字营销进入隐私优先时代后焕发新生。文章探讨了频率派与贝叶斯统计学在MMM中的应用,前者实现简单、结果直观,适合数据充足场景;后者能整合先验知识、量化不确定性,适应复杂和数据稀缺情况。两者各有优劣,选择需结合业务需求与数据条件。贝叶斯方法在隐私保护趋势下尤为重要,为未来营销分析提供新思路。
185 47
频率派与贝叶斯统计在营销组合建模中的应用比较:隐私优先时代的方法选择
|
7月前
|
人工智能 云栖大会 云计算
因AI相聚,新年启航
因AI相聚,新年启航
|
资源调度 前端开发 JavaScript
推荐一款可以自动创建视频的前端Ract框架
推荐一款可以自动创建视频的前端Ract框架
216 1
|
关系型数据库 MySQL Serverless
PolarDB MySQL Serverless:灵活弹性场景深度评测
本文深入评测了阿里云PolarDB MySQL Serverless的灵活弹性场景。作为阿里云专业运维工程师,笔者从多个角度对产品进行了全面分析: 产品特性:介绍了PolarDB MySQL Serverless的核心优势,包括动态弹性、高可用性和按量付费模式。 操作体验:详细描述了集群创建过程和控制台监控功能,突出了其简化运维的特点。 弹性能力:通过三个测试场景验证了产品在不同负载下的自动扩缩容能力,展示了其快速响应和性能稳定性。 API与文档:评估了API的易用性和文档的完整性,并提出了改进建议。 优劣分析:总结了产品的主要优势,如极致弹性和成本效益,同时指出了一些潜在的改进空间。 整体
|
存储 C# 计算机视觉
将彩色图转化为灰度图及其原理介绍
将彩色图转化为灰度图及其原理介绍
309 0
|
前端开发 JavaScript
Tailwindcss 提取组件
Tailwindcss 提取组件
129 1
|
JSON 安全 Java
Spring Boot与WebFlux的实战案例
Spring Boot与WebFlux的实战案例
|
Linux 数据库 开发者
快速上手 AppUploader——下载和安装操作
快速上手 AppUploader——下载和安装操作
|
存储 Java
Java 可变参数:灵活的函数调用艺术
【4月更文挑战第21天】
218 1