移动端监听当前url地址栏的变化 vue

最新推荐文章于 2024-08-03 11:24:54 发布
最新推荐文章于 2024-08-03 11:24:54 发布
阅读量2.7k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42489783/article/details/83659173
版权
本文介绍了一种在项目中实现动态数据加载的方法。通过封装请求数据的函数，并在组件的mounted钩子中调用，结合使用watch监听路由参数变化，从而实现在路由变化时自动重新加载页面数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目中只需要改变url后面的id  需要改变当前页的数据，

把页面请求数据的函数封装起来，在mounted里调用

然后router-link跳转

在watch里再次调用函数就好

watch: {
  // 监听路由参数发生变化，重新加载页面
  "$route": "getNews"
}

 

 

实战Vue：基于Vue的移动端购物商城
2401_85124130的博客
06-25 849
首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作在Cart.vue中配置删除商品的方法。
Vue项目实战-vue2(移动端)
m0_57860459的博客
03-07 9434
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) axios拦截器(背诵) (八) Sticky 粘性布局 (九) 图片懒加载 (十) 全局注册组件 (十一) slot插槽 (十二) 使用ui库需要关注的三点 (十三) 三种路由传参方式(背诵) (十四) 模拟数据 (十五) 计算属性computed和属性观察watch (十
获取上一个页面的url
smz8023的博客
09-12 1714
前端获取上一个页面的url路径 直接上代码： document.referrer 可用此API 来获取~
安卓监听APP网络状态变化
成成成成成成成成成成成成成成丶
04-05 1693
监听手机网络状态变化使用ConnectivtiyManager类,可以获取网络状态，并在网络状态改变的时候发送广播。
【VUE】监听地址栏的变化
IU
08-10 883
watch:{ $route(to,from){ console.log(to); } },
vue实时监听地址栏路由变化--随手记
my_boo_S的博客
12-02 998
vue实时监听地址栏路有变化 在近期的项目中，要实现根据地址栏地址的变化选中对应的导航。 watch: { $route(to, from) { console.log(to.path,"要跳转的页面") console.log(from.path,"来自哪个页面的") }, }, 监听$route就可以实现了。 ...
vue监控url地址栏的变化
Bdbdbdnnd的博客
04-16 2126
vue监控url地址栏变化
一站到底-Vue移动端从零到一构建高效应用
唯见青山不见君
06-11 1653
一站到底-Vue移动端从零到一构建高效应用
vue项目实战(移动端)
m0_65769258的博客
04-16 6709
相关资料# vue-cli脚手架:vue2脚手架 vue3脚手架:vite vue官网: [介绍 — Vue.js vscode插件 vetur 必备工具 vue-helper 一些辅助功能 Vue VSCode Snippets 片段 (一) 创建项目# 01 安装vue-cli脚手架# npm install -g @vue/cli 02 查看vue脚手架版本# 出现版本号表示成功 vue --version 03 创建一个新项目# 创建项目 vue ..
如何在Vue移动端应用中隐藏或去除网页地址栏上的URL显示？
最新发布
11-21
在Vue移动端应用中，为了隐藏或去除浏览器地址栏上的URL显示，通常需要在iOS环境中处理，因为Android可以通过JavaScript API直接控制。对于iOS，你需要在Vue项目中集成`cordova-plugin-statusbar`插件，并设置`...
vue watch url中的参数的变化
reembarkation的博客
03-26 342
vue watch url中的参数的变化
vue监听url路由传递参数变化
荤素菜鸟的博客
12-16 1364
**A.页面传递参数** Clickcity(){ this.$router.push({path:'/City',query:{ url:12 }}) }, **B.页面监听接收参数** watch: { // 监听到路由地址的改变 $route:{ immediate:true, handler(){ if(this.$route.query.url){ console.log(1212)
vue监听url地址栏参数变化
Kino的博客
06-30 6615
问题：在开发过程中我们有可能会遇到一个问题，就是在一个vue项目中引入了一个组件，点击这个组件跳转的还是当前的页面，只是传递的参数发生了变化，这个时候我们传递的参数就不能正常的赋值了，这是因为页面没有重新加载，所以我们就要监听地址栏的参数变化了。 1、传递参数 this.$router.push({ path: url,//路由地址 query:{//参数 type: 1 } }); 2、监听参数变化 watch: { //监听路由地址的改变
vue监听路由地址的改变的方法
记不住代码的前端混子
03-31 863
router.go(0) 刷新时 内容不刷新的情况（自己用作笔记记录一下）同一个页面下，url携带的参数不一样 使用 this.
vue-router 同一个页面地址栏参数改变，页面不刷新的问题
愤怒的阿木木的博客
04-22 2001
记录一下做项目中遇到vue-router 同一个页面地址栏参数改变，页面不刷新的问题 制作搜索功能需要改变路由参数而不改变路由地址重新请求数据，解决方法如下 监听地址栏变化（watch）,这是vue-router官方给出的解决办法。 监听路由变化，把初始化的方法重新写到监听的方法里面执行 watch: { '$route' (to, from) { this.search(this.$route.query.keywords) } }, ...
Vue中监听路由参数变化的几种方式
青春木鱼的博客
08-08 1万+
在开发vue项目的过程中，经常会对某些页面或全局项目的路由进行监听，当路由发生变化的时候去执行某些操作，因此本文总结了监听路由的几种方式
Vue 监听路由变化的三种方式
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-25 3万+
方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,..
Vue watch 监听地址栏的变化
缚己
04-30 1027
watch: { // 监听地址栏变化 $route(to, from) { console.log(to, from) } }
解决 Vue 页面中地址栏参数变更不刷新的问题
Hello World
08-03 1442
在一次Vue项目开发中，遇到了只改变路由中的参数，路由地址不改变页面数据不刷新的问题。造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值