vue不同页面切换的方式(Vue动态组件)

v-if实现

<!--Calender.vue-->
<template><a-calendar v-model:value="value" @panelChange="onPanelChange" /></template>
<script setup>
import { ref } from 'vue';
const value = ref();
const onPanelChange = (value, mode) => {console.log(value, mode);
};
</script>
<style>
</style>
<!--Table.vue-->
<script setup>
import { defineComponent, ref } from 'vue'
defineProps({msg: String,
})
const count = ref(0)const columns = [{name: 'Name',dataIndex: 'name',key: 'name',},{title: 'Age',dataIndex: 'age',key: 'age',},{title: 'Address',dataIndex: 'address',key: 'address',},{title: 'Tags',key: 'tags',dataIndex: 'tags',},{title: 'Action',key: 'action',},
];
const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer'],},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',tags: ['loser'],},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park',tags: ['cool', 'teacher'],},
];
</script><template><a-table :columns="columns" :data-source="data"><template #headerCell="{ column }"><template v-if="column.key === 'name'"><span><smile-outlined />Name</span></template></template><template #bodyCell="{ column, record }"><template v-if="column.key === 'name'"><a>{{ record.name }}</a></template><template v-else-if="column.key === 'tags'"><span><a-tagv-for="tag in record.tags":key="tag":color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">{{ tag.toUpperCase() }}</a-tag></span></template><template v-else-if="column.key === 'action'"><span><a>Invite 一 {{ record.name }}</a><a-divider type="vertical" /><a>Delete</a><a-divider type="vertical" /><a class="ant-dropdown-link">More actions<down-outlined /></a></span></template></template></a-table>
</template><style scoped>
</style>
<!--index.vue--><script setup>
import { ref } from 'vue'
import Table from './components/Table.vue'
import Calender from './components/Calender.vue'let table = ref(true)
let calender = ref(false)const changeTa = ()=>{table.value = truecalender.value = false
}const changeCa = ()=>{calender.value = truetable.value = false
}
</script><template><a-button type="primary" v-if="table" @click="changeCa">日历视图</a-button><a-button type="primary" v-if="calender" @click="changeTa">表格视图</a-button><Table v-if="table"></Table><Calender v-if="calender"></Calender>
</template><style scoped>
</style>

效果:

在这里插入图片描述

在路由地址未变化的情况下试下组件的切换。

Vue 的 元素实现

子组件内容不变,父组件实现方式改变,如下:

<!--index.vue-->
<script setup>
import { ref } from 'vue'
import Table from './components/Table.vue'
import Calender from './components/Calender.vue'
let tableView = ref('Table')
let tableName = ref('日历视图')const changeTa = ()=>{tableView.value = 'Table'
}const tabs = {Table,Calender,
}const changeView = ()=>{if (tableView.value === 'Table'){tableView.value = 'Calender'tableName.value = '表格视图'}else{tableView.value = 'Table'tableName.value = '日历视图'}}
</script><template><a-button type="primary" @click="changeView">{{ tableName }}</a-button> <component :is="tabs[tableView]"></component>
</template><style scoped>
</style>

在这里插入图片描述

这种方式是组件的动态渲染,接下来是路由实现组件的切换。

<RouterLink><RouterView>路由实现

路由必须是全局的在整个路由生命周期都可以使用,并且路由需要作为插件注册到vue实例中。

  • 定义路由规则
import { createMemoryHistory, createRouter } from 'vue-router'
import Table from '../components/Table.vue'
import Calender from '../components/Calender.vue'
const routes = [
{ path: '/calender', component: Table },
{ path: '/table', component: Calender },
]const router = createRouter({
history: createMemoryHistory(),
routes,
})export {router,
}
  • main.js注册路由实例
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';// 路由
import {router } from './router/router.js'
const app = createApp(App)app.use(router)app.use(Antd).mount('#app')
  • 路由渲染组件
<template><RouterLink to="/calender">日历视图</RouterLink><br><RouterLink to="/table">表格视图</RouterLink><RouterView />
</template>

效果
在这里插入图片描述

这种标签式的路由渲染组件路由地址也是不变的,相当于动态组件。

编程式渲染组件

仍然需要定义路由规则和上一节一样。

<!--index.vue--><script setup>
import { ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'let router = useRouter()const changeTable = function() {router.push({path: '/table'})
}const changeCalender = function() {router.push({path: '/calender'})
}</script><template><a-button type="primary" @click="changeCalender">日历视图</a-button><br><a-button type="primary" @click="changeTable">表格视图</a-button><RouterView />
</template><style scoped>
</style>

效果:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/21175.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Matplotlib作图-3.Ranking】50 Matplotlib Visualizations, Python实现,源码可复现

目录 03 Ranking 3.0 Prerequisite 3.1 有序条形图(Ordered Bar Chart) 3.2 棒棒糖图(Lollipop Chart) 3.3 点图(Dot Plot) 3.4 斜率图(Slope Chart) 3.5 杠铃图(Dumbbell Plot) References 03 Ranking 3.0 Prerequisite Setup.py # !pip install brewer2mpl import n…

FJSP:波搜索算法(WSA)求解柔性作业车间调度问题(FJSP),提供MATLAB代码

详细介绍 FJSP&#xff1a;波搜索算法(Wave Search Algorithm, WSA)求解柔性作业车间调度问题&#xff08;FJSP&#xff09;&#xff0c;提供MATLAB代码-CSDN博客 完整MATLAB代码 FJSP&#xff1a;波搜索算法(WSA)求解柔性作业车间调度问题&#xff08;FJSP&#xff09;&…

Java面试题:谈谈Java的内存屏障(Memory Barrier)是什么,它在并发编程中起什么作用?

Java内存屏障&#xff08;Memory Barrier&#xff09;&#xff0c;也称为内存栅栏&#xff0c;是一种同步机制&#xff0c;用于控制程序中不同内存操作的执行顺序。内存屏障在并发编程中起着至关重要的作用&#xff0c;主要体现在以下几个方面&#xff1a; 指令重排&#xff1a…

coredns 被误删了,可以通过重新应用 coredns 的 Deployment 或 DaemonSet 配置文件来恢复

如果 coredns 被误删了&#xff0c;可以通过重新应用 coredns 的 Deployment 或 DaemonSet 配置文件来恢复。以下是恢复 coredns 的步骤&#xff1a; 1. 下载 coredns 配置文件 你可以从 Kubernetes 的官方 GitHub 仓库下载 coredns 的配置文件。以下是下载并应用配置文件的步…

快速排序(排序中篇)

1.快速排序的概念及实现 2.快速排序的时间复杂度 3.优化快速排序 4.关于快速排序的细节 5.总代码 1.快速排序的概念及实现 1.1快速排序的概念 快速排序的单趟是选一个基准值&#xff0c;然后遍历数组的内容把比基准值大的放右边&#xff0c;比基准值小的放在左边&#xf…

一本企业画册怎么制作成二维码分享

​在这个数字化时代&#xff0c;二维码已经成为一种便捷的分享方式。企业画册&#xff0c;作为展示企业形象、宣传产品和服务的重要工具&#xff0c;也可以通过二维码进行分享。现在我来教你如何将一本企业画册制作成二维码分享。 1. 准备好制作工具&#xff1a;FLBOOK在线制作…

Springboot校园食堂智能排餐系统-计算机毕业设计源码85935

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对校园食堂智能排餐系统等问题&#xff0c;对…

ubuntu--Linux使用

Linux使用 Linux 系统简介 linux Linux 就是一个操作系统&#xff0c;与 Windows 和 Mac OS 一样是操作系统 。 操作系统在整个计算机系统中的角色 : Linux 主要是 系统调用 和 内核 那两层。使用的操作系统还包含一些在其上运行的应用程序&#xff0c;比如vim、google、vs…

Qt界面开发软件使用介绍

qt是跨平台软件&#xff0c;可以开发界面程序和软件框架&#xff0c;以及制作3d仿真软件&#xff0c;配合opengles可以实现图形图像开发。本文简要介绍qt开发上位机软件和嵌入式平台开发的使用方法和常见用法。 Qt有qtcreater用于开发程序&#xff0c;以及qtopensourse是跨平台…

7-Zip 介绍

7-Zip 介绍 7-Zip 介绍主要特点 7-Zip 命令行使用基本语法常用命令压缩文件 解压文件查看压缩文件内容测试压缩文件完整性常用选项压缩选项其他选项 7-Zip 介绍 7-Zip 是一款开源的文件压缩和解压工具&#xff0c;广泛用于文件和文件夹的压缩和解压缩操作。它由 Igor Pavlov 开…

Golang | Leetcode Golang题解之第123题买卖股票的最佳时机III

题目&#xff1a; 题解&#xff1a; func maxProfit(prices []int) int {buy1, sell1 : -prices[0], 0buy2, sell2 : -prices[0], 0for i : 1; i < len(prices); i {buy1 max(buy1, -prices[i])sell1 max(sell1, buy1prices[i])buy2 max(buy2, sell1-prices[i])sell2 m…

C++的List

List的使用 构造 与vector的区别 与vector的区别在于不支持 [ ] 由于链表的物理结构不连续,所以只能用迭代器访问 vector可以排序,list不能排序(因为快排的底层需要随机迭代器,而链表是双向迭代器) (算法库里的排序不支持)(需要单独的排序) list存在vector不支持的功能 链…

网站建设方案书

网站建设方案书是指一份书面计划&#xff0c;用于描述关于建立和运营一个网站所需的资源和步骤。这份方案书的目的是确保网站建设过程中的顺利和成功&#xff0c;并最终获得对其所期望的效果。 在撰写方案书时&#xff0c;我们应该遵循以下几个步骤&#xff1a; 一、确定网站的…

2024/5/30 英语每日一段

It stood to reason, then, that somewhere in the brain leptin was being combined with other signals related to available energy, and that this information would then have to be compared with a homeostatic “set point.” This suggested a highly complex set o…

(笔记)如何评价一个数仓的好坏

如何评价一个数仓的好坏 1数据质量产生原因评估方法流程 2模型建设产生问题原因评估方法流程 3数据安全产生问题原因评估方法流程 4成本/性能产生问题原因评估方法流程 5 用户用数体验产生问题原因评估方法流程 6数据资产覆盖产生问题原因评估方法流程 数仓评价好坏是对数仓全流…

红队内网攻防渗透:内网渗透之windows内网权限提升技术:数据库篇

红队内网攻防渗透 1. 内网权限提升技术1.1 数据库权限提升技术1.1.1 数据库提权流程1.1.1.1 先获取到数据库用户密码1.1.1.2 利用数据库提权工具进行连接1.1.1.3 利用建立代理解决不支持外联1.1.1.4 利用数据库提权的条件及技术1.1.2 Web到Win-数据库提权-MSSQL1.1.3 Web到Win-…

[SWPUCTF 2023 秋季新生赛]Junk Code

方法一&#xff1a;手动去除 将所有E9修改为90即可 方法二&#xff1a;花指令去除脚本 start_addr 0x0000000140001454 end_addr 0x00000001400015C7 print(start_addr) print(end_addr) for i in range(start_addr,end_addr):if get_wide_byte(i) 0xE9:patch_byte(i,0x9…

自定义类型:结构体类型

在学习完指针相关的知识后将进入到c语言中又一大重点——自定义类型&#xff0c;在之前学习操作符以及指针时我们对自定义类型中的结构体类型有了初步的了解&#xff0c;学习了结构体类型的创建以及如何创建结构体变量&#xff0c;还有结构体成员操作符的使用&#xff0c;现在我…

win+mac通用的SpringBoot+H2数据库集成过程。

有小部分大学的小部分老师多毛病&#xff0c;喜欢用些晦涩难搞的数据库来折腾学生&#xff0c;我不理解&#xff0c;但大受震撼。按我的理解&#xff0c;这种数据库看着好像本地快速测试代码很舒服&#xff0c;但依赖和数据库限制的很死板&#xff0c;对不上就是用不了&#xf…

Linux基础之进程等待

目录 一、进程等待的基本概念 二、进程等待的重要性 三、进程等待的方法 四、获取子进程status 五、options选项 一、进程等待的基本概念 进程等待是指一个进程在执行过程中暂时停止&#xff0c;并等待某个条件满足后再继续执行的状态。这种等待通常是由于某些事件需要发生…