vue-动态切换组件 （点击事件，切换页面）

已于 2022-03-14 16:24:22 修改
阅读量1w 收藏 40
点赞数 8
文章标签： 前端
于 2022-03-14 12:37:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56349322/article/details/123474469
版权

效果直白讲：

点击事件，切换页面

例子：假设是在 App 组件里，有两个 button 按钮，点击 button1 显示一个页面，点击 button2 显示另个一页面。

步骤：

这个是正常上下组件所展示的界面

这个是点击按钮发生页面跳转的效果

步骤：

另一种方法:路由跳转

 步骤：前端路由底层的逻辑就是监听 hash 地址的变化 ，用到window.onhashchange 事件

 这里的使用的是箭头函数。 箭头函数里面的this 和 外边的 this 是同一个 

如果要使用 function（）{} ，function外边写上 that = this function中使用that.

studyer网
关注
  • 8
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue-router 切换组件页面时进入进出动画方法
10-18
通过这种方式，我们可以自定义Vue-router在切换组件时的动画效果。需要注意的是，`position: absolute`的使用是为了让组件在动画过程中不占用实际空间，从而实现平滑的页面切换。 总的来说，Vue-router的组件页面...
浅谈vue-router路由切换 组件重用挖下的坑
10-16
总之，当vue-router在路由切换时复用组件，我们需要特别注意组件状态的更新。通过合理利用`beforeRouteUpdate`守卫或`$route`的`watch`，我们可以确保组件能够根据新的路由信息正确响应。理解这些机制对于避免类似的...
vue使用动态组件实现TAB切换效果
m0_61663332的博客
12-22 9204
vue移动端使用动态组件实现tab切换效果
Vue3点击侧边导航栏完成切换页面内组件（WEB）
li-xun的博客
10-23 1万+
Vue3点击侧边导航栏完成切换页面内组件（WEB）
VUE element-ui 之button按钮之间切换时单个按钮持续聚焦状态实现（点击按钮聚焦，仅当点击其他按钮时，之前的按钮会失焦，当前按钮聚焦）_elemetui el-button默认聚焦
最新发布
2401_84618790的博客
05-16 171
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总。
超详细的vue结合ElementUI实现头部导航栏进行页面跳转
qq_48961214的博客
04-24 7384
vue中实现顶部栏路由跳转
vue+element plus 点击左侧菜单，右侧内容根据路由切换
weixin_42634040的博客
01-19 4562
菜单切换之前都是用菜单el-menu和el-tabs标签页拼接的，但是菜单没有的组件打不开了，所以改为根据路由打开内容，主要就是改为router-view 借鉴学习了这位大大的思路 指路链接 自己成功之后记录下 路由 router.js const routes = [ { path: '/', name: 'home', component: () => import("../views/Home.vue"),////这里是核心： center作为容器组件，包含左右菜单
vue点击按钮跳转页面
sun13047140038的博客
10-30 8486
在Vue.js中，你可以使用<router-link>或this.$router.push()来实现点击按钮跳转页面的功能，前提是你已经配置了Vue Router。在这个示例中，当用户点击按钮时，redirectToDestination 方法将通过this.$router.push()来触发页面跳转。你还可以在Vue组件的方法中使用this.$router.push()来实现页面跳转。-- 使用 router-link 创建按钮 -->-- 使用按钮触发页面跳转 -->
一个基于Vue.js的tab切换组件，切换效果为左右移动，带有过渡效果
m0_72447899的博客
05-24 1561
在这个组件中，我们使用了Vue.js的transition组件来实现过渡效果，同时使用了CSS3的`transform`属性来实现左右移动的效果。在CSS中，我们使用了`.slide-enter-active`和`.slide-leave-active`来定义过渡的动画效果，使用`.slide-enter`和`.slide-leave-to`来定义进入和离开的状态。在Vue.js中，我们使用`v-if`来控制当前显示的tab内容，使用`@click`来监听tab头部的点击事件，从而切换tab。
解决vue-router 切换tab标签关闭时缓存问题
10-15
在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的...
使用vue-router切换页面时实现设置过渡动画
10-16
总之，通过结合vue-router的路由配置、`<transition>`组件以及CSS过渡效果，我们可以轻松地为Vue应用中的页面切换添加过渡动画。这不仅提升了应用的视觉效果，还能提供更接近原生应用的用户体验。在开发过程中，不断...
vue点击按钮实现简单页面的切换
12-28
本文实例为大家分享了vue点击按钮实现页面切换的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> [removed][removed] </head> <body> 首页 新闻页 <h3 v-show=ta
vue路由变化时，改变导航栏的样式并切换页面
m0_64205744的博客
04-18 3226
记录会遇到的问题，复习小笔记！ 各种导航栏适用，单机某个导航按钮，跳转另一个页面，并改变导航栏样式。 这里我用的是通过动态class和$route.path来实现tab样式的切换 导航栏页面 请自行解析，有问题留言哈 <template> <div> <ul class="hlist_content" v-show="isShow2"> <!-- <li v-for="(ite
vue3实现在某个div里面动态的切换页面
青莳的博客
11-24 599
【代码】vue3实现在动态的某个div里面切换内容。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3935
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue不同组件之间的切换，web前端开发教程
m0_61369817的博客
04-02 804
,});使用v-if和v-else进行切换方式可以实现组件的切换，但是最多只能有2个，有一定的局限性。使用标签component来实现切换vueApp登录注册Vue提供了component,来展示对应名称的组件component是一个占位符,:is属性,用来指定要展示的组件的名称使用。
VUE切换组件
notagoodwriter的博客
01-06 3384
VUE切换组件
Vue页面跳转
xuan__xia的博客
09-15 2514
(根据自己文件路径进行调整)
vue跳转页面的几种常用方法
热门推荐
m0_70031574的博客
07-23 1万+
点击跳转5
vue3 vue-video-player动态切换视频
05-24
你可以在Vue组件中使用`vue-video-player`的`src`属性来动态切换视频。首先，你需要将`vue-video-player`导入到你的组件中： ```javascript import VideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' // 引入样式文件 import 'vue-video-player/src/custom-theme.css' // 引入自定义主题样式文件 ``` 然后在模板中，你可以使用`v-bind`指令绑定`src`属性值来动态切换视频： ```html <template> <div> <video-player ref="player" :options="playerOptions" :src="videoSrc"></video-player> <button @click="changeVideo">切换视频</button> </div> </template> ``` 在Vue实例中，你需要定义`videoSrc`和`playerOptions`属性以及`changeVideo`方法来实现切换视频的逻辑： ```javascript export default { data() { return { videoSrc: 'http://example.com/video1.mp4', playerOptions: { autoplay: true, controls: true, preload: 'auto', muted: false, language: 'zh-CN', techOrder: ['html5', 'flash'] } } }, methods: { changeVideo() { this.videoSrc = 'http://example.com/video2.mp4' this.$refs.player.load() // 重新加载视频 } }, components: { VideoPlayer } } ``` 在`changeVideo`方法中，你可以修改`videoSrc`属性为新视频的URL，并调用`load()`方法重新加载视频。这样，每次点击“切换视频”按钮时，视频就会被切换为新的URL所对应的视频。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

studyer网

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值