热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

vuerouter切换路由时数据如何重置?

问题背景:使用

问题背景:
使用

1
vue

做了组件

1
home.vue

,组件

1
home.vue

里面为

1
nav.vue

1
item.vue

,组件

1
nav.vue

通过

1
vue-route

的路由功能控制显示不同列表,但都是重用

1
item.vue

以形成列表,但都是在同一个页面上显示。


1
url

链接发生变化时,比如:

1
/#!/item/33

,会触发

1
route

,代码如下:

1
2
3
4
5
6
7
8
9
10
...

route: {

    data ({ to }) {

        this.page = 1;

        ...

        //此处对page做相关操作,假设经过操作,page已经变为10了

        ...

    }

},

....

然后通过

1
nav

其他操作,

1
url

又变化了,比如:

1
/#!/item/20

,同样会触发

1
route

,但是我在控制台打印

1
page

时,

1
page

还是为

1
10

,并没有变为

1
1

,导致读取不同列表时数据出错。

求解,搞了好久解决不了,我该怎么做?


已解决:从

1
vue-route

的钩子函数

1
canDeactivate

下手


推荐阅读
  • TCP长连接设备管理平台:架构与功能概览
    本文介绍了基于TCP长连接的设备管理平台的设计理念、技术选型及主要功能模块。最初,项目旨在实现简单的协议测试,但随着需求扩展,逐步演变为一个完整的前后端分离系统。 ... [详细]
  • npm run dev后报错 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • 本文详细介绍了 Vue 路由中的跳转方法、参数传递(包括 query 和 params)以及如何在目标组件中接收这些参数。 ... [详细]
  • Node.js与npm安装及Vue项目搭建指南
    本文详细介绍了如何安装Node.js和npm,以及如何使用npm安装Vue及其相关工具,包括vue-router和vue-cli,并创建一个简单的Vue项目。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文介绍了在 Vue 中如何利用 watch 选项来监控传递给子组件的 props 对象中特定属性的变化,并提供了一个完整的示例代码。 ... [详细]
  • 本文详细介绍了虚拟专用网(Virtual Private Network, VPN)的概念及其通过公共网络(如互联网)构建临时且安全连接的技术特点。文章探讨了不同类型的隧道协议,包括第二层和第三层隧道协议,并提供了针对IPSec、GRE以及MPLS VPN的具体配置指导。 ... [详细]
  • 本文探讨了局端设备与终端设备的基本概念及其在网络架构中的作用,详细分析了两者的工作原理、分类及应用场景。 ... [详细]
  • 辅助路由在 Angular 4 中允许开发者在同一页面中定义多个路由插座(outlet),从而实现在同一视图中同时加载和显示多个组件的功能。这对于构建复杂用户界面非常有用,例如在电商网站中同时显示商品详情和在线客服聊天窗口。 ... [详细]
  • 本文详细介绍了如何在路由器上配置PPP(点对点协议)PAP(密码认证协议)认证,包括DCE和DTE两端的具体配置步骤,旨在帮助网络管理员有效实施安全的链路认证。 ... [详细]
  • MikroTik RouterOS U盘安装工具netinstall详解及使用技巧
    本文详细介绍了如何使用MikroTik RouterOS的U盘安装工具netinstall,包括其功能、使用方法及注意事项,旨在帮助用户更好地理解和应用这一工具。 ... [详细]
  • 本文探讨了在Koa框架下,如何在启动服务前检查指定端口是否已被占用的方法,并提供了相应的代码示例。 ... [详细]
  • 本文深入探讨了服务器的主要作用,包括加速访问、增强安全性和绕过访问限制等,并详细介绍了如何正确配置代理服务器。 ... [详细]
  • 详解Linux中的mount命令及其应用
    本文旨在深入解析Linux系统中的mount命令,涵盖其基本用法及高级特性,如挂载各种存储设备和网络文件系统。适合初学者及有一定经验的技术人员学习。 ... [详细]
author-avatar
北人南漂记
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有