使用watch属性完成页面选择跳转

最新推荐文章于 2023-05-25 14:26:37 发布
最新推荐文章于 2023-05-25 14:26:37 发布
阅读量373 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XYXYYDD/article/details/121819332
版权

1.对发生变化的值进行监听

 2.对监听的值进行深监听，立即执行，提交一个事件，传递一个新值

 3.search父组件接受事件 定义变量selectId,事件改变这个值

 

 4.模块组件将这个值传递下去

 

 5.显示的组件接受并判断是否显示

XYXYYDD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态
江咏之
05-09 4484
实际项目开发中有时候需要根据路由的变化去实进行一些操作，在此，我总结了三种方法。 1、watch监听 // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或者 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 .
vue使用watch监听路由跳转同一页面传过来的参数
PEACEMINUSON的博客
01-10 317
【代码】vue使用watch监听路由跳转传过来的参数。
Vue之watch路由跳转
HZKang的博客
02-09 3041
可能应用的场景：比如我当前是个介绍新闻资讯的页面，它的子路由是点击某条新闻跳转到的详情组件，实现思路倒很简单： 主路由的新闻列表写在一个div里，并给该div一个v-if=”news”，当监测到路由处于新闻资讯的主路由就让news等于true，即显示。如果不在主路由（比如跳转去子路由详情页面）则为false，如下： router.js： { path: '/new', ...
解决vue路由跳转同一页面，携带不同参数，页面不刷新的问题
等归,的博客
05-25 1973
Vue路由跳转同一个页面，携带不同参数，页面不刷新 跳转同一个页面，携带不同的参数，页面不变
vue3中界面使用router，以及使用watch来监听router的改变
浩星
11-09 8725
vue3中界面使用router，以及使用watch来监听router的改变
vue页面跳转后返回原页面初始位置方法
11-28
在Vue.js应用中，当用户从一个页面跳转到另一个页面，然后按返回按钮返回原始页面时，通常希望用户能够回到他们离开时的位置。要实现这个功能，我们可以利用Vue的生命周期钩子、Vuex状态管理器以及Vue Router的特性...
vue从一个页面跳转到另一个页面并携带参数的解决方法
10-16
1. **使用`this.$router.push()`进行页面跳转** 要在Vue组件中实现页面跳转，可以使用`this.$router.push()`方法。这个方法接受一个对象，其中包含`path`或`name`属性来指定目标路由，以及可选的`query`或`params`...
使用vue-router切换页面时实现设置过渡动画
10-16
在Vue.js应用中，使用vue-router进行页面切换时，我们经常希望添加过渡动画来提升用户体验。这篇文章将详细讲解如何在vue-router中实现页面切换的过渡动画。 首先，我们需要理解vue-router的基本概念。Vue Router是...
解决vue多个路由共用一个页面的问题
08-27
解决 Vue 多个路由共用一个页面的问题可以使用 watch、computed 属性或生命周期钩子函数来监听路由变化，并重新加载数据。这种方法可以满足大多数业务需求，但是在页面结构变化很大的情况下，建议单独新建一个不同的...
【JavaScript源代码】vue 页面跳转的实现方式.docx
12-30
在实际开发中，开发者可以根据需求选择合适的方式来实现页面跳转，确保用户体验和数据的完整性和持久性。`this.$router.push()` 适用于更复杂的跳转场景，而 `router-link` 组件则在简单的导航链接中更为方便。了解...
点击跳转详情页的时候。路由改变，页面不刷新，也不触发created 事件 。
m0_58861443的博客
01-07 1750
问题 ：点击跳转详情页的时候。路由改变，页面不刷新，也不触发created 事件 。 原因 ：页面有缓存。 解决方案 ： 1: 在路由出口处，加上唯一的key属性做为路由的id <keep-alive> <router-view :key="$route.fullPath"> </router-view> <keep-alive> 我们配置了动态路由，并且给每个标题传了不同的id值 通过$route.fullpath就可以拿到传过去的id 2:watch 监
ts watch路由 参数变化_watch监听路由变化详解
weixin_34069265的博客
12-31 1694
一、watch监听路由的方法通过watch监听，当路由发生变化的时候执行。方法一：watch:{$router(to,from){console.log(to.path)}}方法二：watch: {$route: {handler: function (val, oldVal){console.log(val);},// 深度观察监听deep: true}},方法三：watch: {'$rou...
52. Vue使用watch监听网页的URL变化
DevOps海洋的渔夫@专栏
08-05 6328
需求 上一篇章使用watch组件通过监听文本框的参数变化，实现了名称拼接的案例。这种业务使用事件监听都可以处理，但是如果需要监听网页的URL地址变化，这样事件监听肯定是做不了的。那么此时就可以使用watch来实现了。 那么这个实现的思路该怎么处理呢？ 这时候可以监听路由的对象this.$route.path变化来处理。 示例 1.首页编写路由映射登录以及注册两个组件 <!DOCTYPE ht...
vue页面已经跳转，但是watch获取不到$route
OldStreet61的博客
09-03 7085
1、问题描述： 在开发的时候使用 this.$router.push({path:"/test",query:{name:"test"}}) 进行页面跳转， 页面已经跳转至test了，并且路由显示"test?name='test' " （1）watch监听获取 $route(to, from) { console.log(this.$route);//打印空对象，获...
watch监听事件的多种用法
是大林的林吖-博客
12-01 7209
一、普通监听 watch: { name(newVal, oldVal) { console.log(newVal) // 打印name变化的值 } } 二、immediate属性(默认false) watch: { name: { handler(newVal, oldVal){ console.log(newVal) // 打印name变化的值 } immediate: true } } 三、deep属性（深度监听） watch: { name: { handle
Vue+$route 监听页面跳转
fyydashen的博客
12-08 2700
场景：父页面A，子页面B。从父页面A跳转到子页面B，进行添加操作，添加完成，关闭子页面B，跳转回父页面A。因为新增一条数据，需要重新加载列表。 父页面A局部代码如下： watch: { $route(to, from) { // console.log("到哪个页面去", to.path); // console.log("从哪个页面来", from.path); if (to.path == "/asset/allasset" && from.path =
用watch监听路由变化
weixin_43837268的博客
07-10 1151
<template> <div class="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router...
使用watch监听路由变化和watch监听对象
beautifultian的博客
06-01 9445
解决办法： export default{ data(){ return{} }, watch:{ "$route":"getPath"  // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path;    //或得当前路径 进行逻辑判断 } } }
vue3 watch监控从路由从哪个页面跳转来的
最新发布
06-09
你可以在 `$route` 对象中使用 `from` 属性获取路由跳转前的路由信息，例如： ```javascript watch: { '$route': { handler: function (to, from) { console.log('从', from.path, '跳转到', to.path) console....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值