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

最新推荐文章于 2024-07-30 16:37:31 发布
最新推荐文章于 2024-07-30 16:37:31 发布
阅读量2.1k 收藏 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
关注
专栏目录
解决vue单页路由跳转后scrollTop的问题
10-18
当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以采用两种方法： 1. **全局滚动回调**： 在`main.js`文件中，我们可以监听Vue Router的`afterEach`钩子函数。这个...
vue项目中怎么控制隐藏（显示）分页
95后独自打拼的程序猿
07-14 2809
大家都知道，在vue中我们可以使用v-if或者v-show去做隐藏显示， 这里我使用的是v-show，因为此元素进入页面后,此元素会频繁的改变显示状态,此时用v-show更加合适 2.在data数据中写入 3.在methods模拟数据请求 4.通过watch去监听totalnumber变化从而改变分页状态 总结 例如：以上就是今天要讲的内容，本文仅仅简单介绍了vue中如何使用......
js,jquery,vue设置html标签隐藏不显示
tanxinji的博客
10-17 1053
使用js将id=myElemnt的标签隐藏。vue隐藏 v-show的值为false。
切换路由时页面空白问题（vue3）
最新发布
qq_66953312的博客
07-30 796
页面空白不报错，刷新后显示正常
vue路由跳转的时候隐藏或去掉导航栏或者菜单栏
qzh88888888的博客
10-12 622
vue路由跳转的时候隐藏或去掉导航栏或者菜单栏-CSDN博客
若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
热门推荐
坐等夕阳落time的博客
08-13 2万+
若依vue前端能跳转到新路径的方法，我暂且知道这三种形式：1 在若依的菜单项添加2 在router里添加3 直接用标签里跳转第1和第2钟做法，都是要提前声明一个路由对象，然后使用或者$router.push跳转metaTitle: row.chargeName + '的费用配置'},})第3钟做法，不用声明就可以直接跳转，但是因为你不曾声明过，所以面包屑和标签页标题是不会发生改变的。..................
Vue项目中常见问题(1)如何控制组件在不同页面中的显示与隐藏
qq_46368050的博客
05-12 8669
目录 问题一:首页|搜索底部是有Footer组件，而登录注册是没有Footer组件 思路:Footer组件显示|隐藏，选择v-show|v-if 解决办法: 方法一:在App.vue中利用v-show来控制显示与隐藏 1.为什么用$route.path 因为在main.js中注册路由的信息时:当下图位置中书写router的时候,组件身上都会拥有$route,$routers属性 打开项目页面的控制台,可以看到$route下有path:"/home" 2.思考:假如有一百个路由组件要显示Foo
vue 实现路由跳转时更改页面title
10-16
在Vue应用中实现路由跳转时更改页面标题是一项常见的需求，它能够改善用户体验，让浏览器的标签页标题与当前用户访问的页面内容保持一致。本篇将详细介绍如何在Vue项目中，利用Vue Router来实现路由跳转时自动更改...
vue路由拦截及页面跳转的设置方法
08-27
Vue 路由拦截及页面跳转的设置方法 Vue 路由拦截及页面跳转的设置方法是 Vue 应用程序中常见的需求，本文将详细介绍如何实现路由拦截及页面跳转的设置。 一、路由设置 在 Vue 中，我们可以使用 Vue Router 库来...
vue相同路由跳转强制刷新该路由组件操作
10-14
可以在路由跳转时添加一个动态查询参数，如当前的时间戳或随机数。在触发路由跳转的方法中，可以这样做： ```javascript this.$router.push({ path: "/xxx", query: { t: Date.now(), }, }); ``` 这将导致...
vue实现登录后页面跳转到之前页面
08-28
Vue 实现登录后页面跳转到之前...通过使用 Vue Router 和 router.currentRoute 对象，我们可以轻松地实现登录后页面跳转到之前页面的功能。该功能可以广泛应用于各种 Web 应用程序中，提高用户体验和应用程序的可用性。
vue显示/隐藏
Holly1945的博客
06-16 5129
v-if vs v-show v-if 是真正的条件渲染，会在切换的过程中，条件块内的事件监听器和子组件适当地被销毁和重建。 惰性： 初始渲染条件为假时，什么也不会做。 v-show： 不管什么初始条件都会渲染，只是简单基于css display 属性切换。 v-if 有更高的开销，v-show有更高的初始渲染开销。 使用场景： 频繁切换，v-show 运行条件很少改变，使用v-if display：none； 元素存在，不占位，不显示 visible: hidden; 元素存在，占位，不显示 height
web前端-Vue动态显示隐藏表单el-form-item
asdfadafd的博客
03-06 5173
给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏 <!-- 类别展示隐藏 --> <el-form-item id="classShowOrHide" v-model="showClass" v-if="showClass==true" label="类别类型" prop="classType"> <el-select v-model="form.
Vue 路由元信息的使用例子（实现Footer组件在不同页面的显示和隐藏）
Tqlsecret的博客
10-08 866
然后在使用Footer组件时使用v-show来控制它显示与否， 当$route.meta,show为true时才显示，否则就是隐藏的。我们可以根据组件上的$route获取当前路由的信息，通过路由来判断Footer组件的显示和隐藏。功能效果：在首页和搜索展示页显示Footer组件，在登录、注册页不显示Footer组件。配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象。首先定义路由的时候可以配置meta字段。
vue中实现某一些路由页面隐藏导航栏的功能
从入门到放弃的博客
06-04 1万+
为了将导航栏显示在每一个页面中，可以将导航栏与<router-view>放在同一级显示，如下： <header> ... </header> <router-view></router-view> 但是，在某些时候，我们需要隐藏导航栏显示，比如登录界面，为了实现导航栏的隐藏，可以使用如下代码： <header v-...
vue+element路由标签使用tag动态显示隐藏以及跳转实现(使用vuex)
Eleuuuuy的博客
01-27 2465
效果图： 点击tab可以跳转到导航对应页面。 代码： <store> state:{ currentMenu:null, menu:[], tabsList:[ { path:'/', name:'首页', icon:'home' } ] }, mutations:{ //选择标签 selectMenu(state,val){ if(val.path === '/'){ this.currentMenu = null; } else { s
vue实现监听切出当前页面显示隐藏方法visibilityChange
weixin_43923808的博客
03-23 1730
【代码】vue实现监听切出当前页面显示隐藏方法visibilityChange。
【Vue项目笔记心得】组件的隐藏与显示------v-if，v-show，路由元信息
qiaoyangla的博客
04-13 2598
显示或隐藏组件v-if、v-show Footer组件：在Home，Search时显示，在登录注册界面时隐藏 1、我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer组件的显示与隐藏 <!-- 在Home、Search显示，在登录注册隐藏 --> <Footer v-show="$route.path=='/home'||$route.path=='/search'"/> 2、配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对
Vue-元素曝光(判断元素是否在可视区域内)（一）
第二世界
07-24 4462
IntersectionObserver介绍 intersection-observer npm包实际运用
vue路由跳转后不刷新页面
07-22
你可以使用 Vue Router 的 `push` 方法进行路由跳转，它不会刷新页面。这是因为 Vue Router 使用了前端路由的方式进行页面切换，不需要重新加载整个页面。 例如，在你的 Vue 组件中可以这样使用： ```javascript this.$router.push('/your-route-path'); ``` 这将导航到指定的路由路径，而不会刷新页面。 另外，如果你想要在同一个路由下切换不同的组件而不刷新页面，你可以使用 `<router-view>` 组件来实现动态组件渲染。在路由配置中，给每个路由配置一个对应的组件，然后在父组件中使用 `<router-view>` 来显示当前路由所对应的组件。 希望能帮到你！如果你有任何其他问题，请随时问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值