vue通过路由跳转后设置跳转后页面标签的可见或不可见

最新推荐文章于 2023-10-17 19:00:00 发布
最新推荐文章于 2023-10-17 19:00:00 发布
阅读量2.0k 收藏 3
点赞数
分类专栏： Vue.js 前端 文章标签： vue跳转后设置隐藏 vue跳转后设置可见
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34663267/article/details/90667724
版权

1.跳转后，在想可见的标签添加v-show=“isShow”；在想让它不可见的标签里面添加v-show=“areShow”
图1
2.设置初始值（不写会报未定义错误）
在这里插入图片描述
3.触发isShow 和areShow的值改变的事件应该是当前页面路由地址的改变，并且这里需要使用watch完成监控：
图3
4.这样就能实现：
(1)开始时显示v-show="areShow"标签里面的内容:
在这里插入图片描述
(2)通过路由跳转到这个页面显示v-show="isShow"标签里面的内容:
在这里插入图片描述
参考文章

前热火球员LeBron James
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三级标签列表实现路由跳转
weixin_48115183的博客
04-25 454
做电商网站时会经常遇到这种三级标签,如果使用router-link跳转那会给每个标签都加上,非常耗性能,所以一般都是使用编程式导航和事件委托来完成路由跳转,我们可以给每个a标签打上自定义属性data-XXX,然后一级菜单和二级菜单还有三级菜单各打上鸽子的自定义属性data-xxx123 <div class="all-sort-list2" @click="goSearch" @mouseleave="leaveIndex"> <div class="ite...
解决vue单页路由跳转后scrollTop的问题
10-18
当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以采用两种方法： 1. **全局滚动回调**： 在`main.js`文件中，我们可以监听Vue Router的`afterEach`钩子函数。这个...
Vue-元素曝光(判断元素是否在可视区域内)（一）
第二世界
07-24 4442
IntersectionObserver介绍 intersection-observer npm包实际运用
vue+element路由标签使用tag动态显示隐藏以及跳转实现(使用vuex)
Eleuuuuy的博客
01-27 2424
效果图： 点击tab可以跳转到导航对应页面。 代码： <store> state:{ currentMenu:null, menu:[], tabsList:[ { path:'/', name:'首页', icon:'home' } ] }, mutations:{ //选择标签 selectMenu(state,val){ if(val.path === '/'){ this.currentMenu = null; } else { s
vue vue-router 跳转页面，隐藏主路由
weixin_44557053的博客
05-22 6722
vue-router 跳转页面时，主路由还显示，解决方法 主要问题是你把路由引入成了公共底部 { path:'/home', name:'home', component:home }, 将其改成 { path:'/home', name:'home', component:home, meta:{ index:0, showFooter:true } } 然后在app...
vue中实现某一些路由页面隐藏导航栏的功能
热门推荐
从入门到放弃的博客
06-04 1万+
为了将导航栏显示在每一个页面中，可以将导航栏与<router-view>放在同一级显示，如下： <header> ... </header> <router-view></router-view> 但是，在某些时候，我们需要隐藏导航栏显示，比如登录界面，为了实现导航栏的隐藏，可以使用如下代码： <header v-...
vue路由拦截及页面跳转的设置方法
08-27
Vue 路由拦截及页面跳转的设置方法 Vue 路由拦截及页面跳转的设置方法是 Vue 应用程序中常见的需求，本文将详细介绍如何实现路由拦截及页面跳转的设置。 一、路由设置 在 Vue 中，我们可以使用 Vue Router 库来...
vue相同路由跳转强制刷新该路由组件操作
10-14
可以在路由跳转时添加一个动态查询参数，如当前的时间戳或随机数。在触发路由跳转的方法中，可以这样做： ```javascript this.$router.push({ path: "/xxx", query: { t: Date.now(), }, }); ``` 这将导致...
vue 实现路由跳转时更改页面title
10-16
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现登录后页面跳转到之前页面
01-19
1.router.currentRoute:当前的路由信息对象，我们可以通过router.currentRoute.fullPath获得解析后的 URL，包含查询参数和 hash 的完整路径，如果要访问的页面的路由有命名（name）的话，可以通过router.current...
vue+html+不可见标签,【专题】（vue+element-ui）动态设置tabel列的显示与隐藏
weixin_30276247的博客
07-02 872
不得不说，百度很强大，只要搜索饿了么怎么动态设置列会获得不少答案；html一、v-show(不生效)：v-show直接绑定,获得的结果很意外，哈哈，不起做用，饿了么对v-show不感冒；dom二、v-if()：此方法确实能够控制显示与隐藏；不过度状况使用：布局>>a: element组件el-table-columnspav-if="colData[0].istrue"prop="...
【Vue项目笔记心得】组件的隐藏与显示------v-if，v-show，路由元信息
qiaoyangla的博客
04-13 2574
显示或隐藏组件v-if、v-show Footer组件：在Home，Search时显示，在登录注册界面时隐藏 1、我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer组件的显示与隐藏 <!-- 在Home、Search显示，在登录注册隐藏 --> <Footer v-show="$route.path=='/home'||$route.path=='/search'"/> 2、配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对
Vue 路由元信息的使用例子（实现Footer组件在不同页面的显示和隐藏）
Tqlsecret的博客
10-08 828
然后在使用Footer组件时使用v-show来控制它显示与否， 当$route.meta,show为true时才显示，否则就是隐藏的。我们可以根据组件上的$route获取当前路由的信息，通过路由来判断Footer组件的显示和隐藏。功能效果：在首页和搜索展示页显示Footer组件，在登录、注册页不显示Footer组件。配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象。首先定义路由的时候可以配置meta字段。
vue3中关于声明触发的事件问题
weixin_42836402的博客
04-21 250
如果组件A中，一个原生事件名（如click）写在emits选项中，而B组件调用了A组件，如果在A组件上监听click事件，则不会触发原生的click事件。注释ComponentA.vue中的defineEmits(['click'])，保存，刷新页面。运行vue，点击按钮。
js,jquery,vue设置html标签隐藏不显示
最新发布
tanxinji的博客
10-17 992
使用js将id=myElemnt的标签隐藏。vue隐藏 v-show的值为false。
vue3 监听resize窗口事件,离开页面要销毁窗口事件。
weixin_46409887的博客
02-14 1万+
vue3 监听resize窗口事件,频繁触发的bug解决。
vue 控制显示隐藏的两种办法
Web_Notes的博客
10-10 6183
方法一：v-if <div class="operate-w" v-if="CanAddTip"> 截至日期已过，不能添加套餐 </div> data: { CanAddTip：false; } //方法里： goSet: function (e) { this.CanAddTip=true; //this.CanAddTip=!this.CanAddTip; 或者直接取反 }, 其他：v-if=“item.payState0?true:false"
一起来学Vue.js【7】
weixin_43315973的博客
04-04 129
条件与循环 之前有提到一点v-if,是给v-if添加布尔变量，在data里设置变量的值。下图中是一个完整的v-if语句，为多分支结构。在data里设置select为空，则执行v-else。和其他语言的if结构没什么明显的区别。 Vue.js提供了v-show,用于控制组件是否可见。在v-show里添加一个变量，先不设置值，打开浏览器观察。 浏览器面板并没有显示内容，但是通过F12可以看到html网页中有该div的位置，只是不显示出来。也就是说v-show默认不显示。 在data里添加isOK的值为t
Vue路由页面跳转后不显示界面的问题
风不知从何处起的小屋
12-04 9423
1.首先检查是否配置了 2.检查关键字是否有错误，首先检查名字的大小写，然后检查关键字是否出错 着重检查:路由的配置界面，component关键字和routes 【将routes误写成了router ----》这个错误经常出现，引起重视！！！】 ...
vue路由跳转后不刷新页面
07-22
你可以使用 Vue Router 的 `push` 方法进行路由跳转，它不会刷新页面。这是因为 Vue Router 使用了前端路由的方式进行页面切换，不需要重新加载整个页面。 例如，在你的 Vue 组件中可以这样使用： ```javascript ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值