首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

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

作者：北人南漂记 | 来源：互联网 | 2023-07-17 20:53
问题背景：使用

问题背景：
使用

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

下手


推荐阅读
  • token

    高效且安全的Token存储策略

    本文探讨了在不同场景下如何高效且安全地存储Token，包括使用定时器刷新、数据库存储等方法，并针对个人开发者与第三方服务平台的不同需求提供了具体建议。 ... [详细]
  • token

    Vue CLI 3 项目中使用 Pre-render SPA Plugin 进行预渲染

    页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面，建议采用SSR（服务器端渲染），如Nuxt等框架。更多优化策略可参见：https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • go

    Vue CLI 基础入门指南

    Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法，包括环境搭建、项目创建、常见配置及路由管理等内容，适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • go

    Vue3中如何提高开发效率

    小编给大家分享一下Vue3中如何提高开发效率，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获， ... [详细]
  • 正则

    教你从写一个迷你koarouter到阅读koarouter源码

    本打算教一步步实现koa-router，因为要解释的太多了，所以先简化成mini版本，从实现部分功能到阅读源码，希望能让你好理解一些。希望你之前有读过koa源码，没有的话，给你链接 ... [详细]
  • 正则

    如何使用 ASP.NET 和 Vue.js 构建单页面应用并处理复杂组件

    作为一名新手开发者，我正在尝试使用 ASP.NET 和 Vue.js 构建一个单页面应用，涉及多个复杂组件（如按钮、图表等）。希望有经验的开发者能够提供指导。 ... [详细]
  • 正则

    Vue Router 与 React Router DOM 的主要区别

    本文详细探讨了 Vue Router 和 React Router DOM 之间的主要区别，以及它们在不同框架中的适用场景。 ... [详细]
  • 正则

    基于 Vue 和 Element UI 实现的简洁登录界面设计

    基于 Vue 和 Element UI 实现的简洁登录界面设计
    本文介绍了一种利用 Vue.js 和 Element UI 框架构建的简洁登录界面设计。该设计不仅注重用户体验，还确保了界面的美观性和易用性。通过合理的布局和组件配置，实现了高效、响应式的登录功能，适用于多种前端应用场景。 ... [详细]
  • java

    告别jQuery：Bootstrap5即将全面脱离jQuery依赖及其他前端热点

    告别jQuery：Bootstrap5即将全面脱离jQuery依赖及其他前端热点
    本文精选了2019年2月「前端大全」平台上的15篇热门文章，涵盖技术分享与资源推荐。关注前端大全，获取更多前沿信息，提升您的前端技能。 ... [详细]
  • java

    [附源码]计算机毕业设计JAVAjsp医药管理信息系统

    [附源码]计算机毕业设计JAVAjsp医药管理信息系统
    [附源码]计算机毕业设计JAVAjsp医药管理信息系统项目运行环境配置：Jdk1.8Tomcat7.0MysqlHBuilderX（Webstor ... [详细]
  • java

    深入理解函数式编程中的函子

    函子（Functor）是函数式编程中的一个重要概念，它不仅是一个特殊的容器，还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用，包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • java

    利用Vue实现点击商品详情跳转功能的方法解析

    利用Vue实现点击商品详情跳转功能的方法解析
    本文将详细介绍如何使用Vue框架实现从前端展示页面点击商品信息（如图片或文本）后，能够平滑跳转至该商品的详细信息页面。整个过程不仅涉及前端页面的设计与交互，还包括与后端接口的数据交互，旨在为开发者提供一种高效且实用的解决方案。 ... [详细]
  • java

    Flutter 2.* 路由管理详解

    Flutter 2.* 路由管理详解
    本文详细介绍了 Flutter 2.* 中的路由管理机制，包括路由的基本概念、MaterialPageRoute 的使用、Navigator 的操作方法、路由传值、命名路由及其注册、路由钩子等。 ... [详细]
  • java

    利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

    本文介绍了如何使用 Node.js 和 Express（4.x 及以上版本）构建高效的文件上传功能。通过引入 `multer` 中间件，可以轻松实现文件上传。首先，需要通过 `npm install multer` 安装该中间件。接着，在 Express 应用中配置 `multer`，以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置，帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • service

    理解和优化进程与线程状态转换机制

    在Cisco IOS XR系统中，存在提供服务的服务器和使用这些服务的客户端。本文深入探讨了进程与线程状态转换机制，分析了其在系统性能优化中的关键作用，并提出了改进措施，以提高系统的响应速度和资源利用率。通过详细研究状态转换的各个环节，本文为开发人员和系统管理员提供了实用的指导，旨在提升整体系统效率和稳定性。 ... [详细]
author-avatar
北人南漂记
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有