开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Nuxtjs/Vuejs表单数据在使用浏览器后退按钮导航到不同路线并返回到上一路线时丢失

Nuxt.js是一个基于Vue.js的服务端渲染框架，它可以帮助我们快速构建具有良好性能和SEO优化的应用程序。在使用Nuxt.js和Vue.js开发表单时，可能会遇到以下情况：当用户在表单页面填写完数据后，点击浏览器的后退按钮导航到其他路由页面，然后再返回到上一路线时，之前填写的表单数据丢失的问题。

这个问题的原因是浏览器的缓存机制导致的。当用户点击后退按钮返回到上一路线时，浏览器会从缓存中加载之前的页面，而不会重新发送请求获取最新的数据。因此，之前填写的表单数据并没有被保留下来。

为了解决这个问题，我们可以采取以下几种方法：

使用Vue.js的keep-alive组件：在路由组件中使用keep-alive组件可以缓存组件的状态，包括表单数据。这样当用户返回到之前的路线时，之前填写的表单数据会被保留下来。具体使用方法可以参考Vue.js官方文档中的keep-alive组件介绍：Vue.js官方文档 - keep-alive
使用浏览器的本地存储：可以使用浏览器的本地存储（如localStorage或sessionStorage）将表单数据保存起来。当用户返回到之前的路线时，可以从本地存储中读取之前保存的表单数据并填充到表单中。具体使用方法可以参考MDN文档中的Web Storage API介绍：MDN - Web Storage API
使用Vuex进行状态管理：可以使用Vuex来管理表单数据的状态。当用户填写表单时，将表单数据保存到Vuex的状态中。当用户返回到之前的路线时，可以从Vuex的状态中读取之前保存的表单数据并填充到表单中。具体使用方法可以参考Vuex官方文档：Vuex官方文档

以上是解决Nuxt.js/Vue.js表单数据在使用浏览器后退按钮导航到不同路线并返回到上一路线时丢失的几种方法。根据具体的需求和项目情况，选择适合的方法来解决这个问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularDart 4.0 高级-路由概述顶

概观 浏览器是一种熟悉的应用程序导航模型：在地址栏中输入一个URL，然后浏览器导航到相应的页面。点击页面上的链接，浏览器导航到新页面。...点击浏览器的后退和前进按钮，浏览器会前后浏览您浏览过的网页的历史记录。 Angular路由器借鉴了这种模式。它可以将浏览器URL解释为导航到客户端生成视图的指令。...如果您点击了浏览器的后退按钮而不是“返回”按钮，该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。现在点击危机中心链接查看正在进行的危机列表。 ?...与英雄细节不同，当您键入更新时，危机细节更改是暂时的，直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。这两个按钮都回到危机中心及其危机列表。不要单击任一按钮。...点击浏览器后退按钮或“英雄”链接。向上弹出一个对话框。 ? 您可以选择“OK”并丢失您的更改，或单击“Cancel”并继续编辑。这种行为的后面是路由的routerCanDeactivate挂钩。

6.1K2 0

Vue的一些命名规则与SPA实现思路

例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b 4.4 有时候想要渲染成某种标签，例如。...于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航 4.5 active-class 设置链接激活时使用的 CSS 类名。...应用程序单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中传统多页面应用程序： ...对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面优势减少了请求体积，加快页面响应速度，降低了对服务器的压力更好的用户体验，让用户在web app感受native...("hashchange",function () {}) 4 、监听锚点值变化的事件，根据不同的锚点值，请求相应的数据 5 、原本用作页面内部进行跳转，定位并展示相应的内容 3.

1.9K1 0

你能用 JavaScript 访问历史记录吗？

使用JavaScript通过window.history对象来访问和操作浏览器的历史记录。window.history对象提供了一些方法和属性，跟踪浏览历史、导航到不同的页面以及对历史记录进行修改。...console.log(history.length); 2：history.back()：将浏览器导航到上一个页面，等效于用户点击浏览器的后退按钮。...history.back(); 3：history.forward()：将浏览器导航到下一个页面，等效于用户点击浏览器的前进按钮。...history.forward(); 4：history.go(n)：将浏览器导航到相对于当前页面的特定位置，其中n表示相对于当前页面的偏移量。正值表示前进，负值表示后退。...history.replaceState({ page: "about" }, "About", "/about"); 通过使用这些方法和属性，读取历史记录的长度、在历史记录中导航、添加新的历史状态或替换当前状态

7215 0

17 Most popular Vue.js plugins

vue-meta 有以下特点：在组件内设置 metaInfo，便可轻松实现头部标签的管理。 metaInfo 的数据都是响应的，如果数据变化，头部信息会自动更新支持 SSR。...支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖 jQuery 为基础、vue2 过渡动画兼容、支持撤销操作，总之是一款非常优秀的 vue 拖拽组件。...地址：https://www.npmjs.com/package/vee-validate 为了确保通过表单从用户那里收集正确类型的数据，有必要验证表单，以确保用户输入符合预期的模式。...这个库允许你使用 VueJS 组件为你的网站轻松创建 3D 内容。...你可以使用这个库在你的网站上添加一个 3D 渲染器，并在你的 VueJs 文件的部分中使用预先建立的组件指定场景细节，如材料、照明、网格、阴影等。

6K3 0

Vue-Router

路由是决定数据包从来源到目的地的路径. 转送将输入端的数据转移到合适的输出端. 路由中有一个非常重要的概念叫路由表.路由表本质上就是一个映射表, 决定了数据包的指向....功能包括：嵌套路线/视图映射模块化，基于组件的路由器配置路由参数，查询，通配符查看由Vue.js过渡系统提供动力的过渡效果细粒度的导航控制与自动活动CSS类的链接 HTML5历史记录模式或哈希模式...: 该标签会根据当前的路径, 动态渲染出不同的组件. 网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和处于同一个等级....to='/home' tag='li'> replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中<router-link...在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类. 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.

2.3K1 0

Flutter学习笔记：BottomNavigationBar实现多个Navigation

最近我研究了一下Flutter，但是在使用Navigator的时候遇到了一个很头痛的问题，就是当我们去来回切换导航按钮时，Flutter会重新build，从而导致控件重新Build，从而会失去浏览历史。...我们可以独立地推送/弹出每个导航器，并且后台导航员保持他们的状态。? One more thing 如果我们在Android上运行应用程序，当我们按下后退按钮时，我们会发现一个有趣的现象： ?...看一下WillPopScope的文档：注册用户否决尝试的回调以解除封闭的/// [ModalRoute] 在第4行，我们定义一个onWillPop（）回调，如果当前导航器可以弹出则返回false，否则返回...如果我们再次运行应用程序，我们可以看到按下后退按钮会解除所有推送路线，只有当我们再次按下它时我们才会离开应用程序。 ?...1_qQW2iGXiWL2F1tu6cLQfwg.gif 需要注意的一点是，当我们在Android上推送新路线时，会从底部滑入。相反，惯例是在iOS上从右侧滑入。

4.3K2 0

Vue04路由--SPA+ 使用路由建立多视图单页应用+router-link相关属性+【面试题：js中const,var,let区别】

Web应用程序单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中传统多页面应用程序：对于传统的多页面应用程序来说..., 每次请求服务器返回的都是一个完整的页面优势减少了请求体积，加快页面响应速度，降低了对服务器的压力更好的用户体验，让用户在web app感受native app的流畅 ...route和router的区别 route：路线 router：路由器路由器中包含了多个路线 3.3.2 定义路由 //定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用...$router.push({ path:'/home' }); 示例一：编程式前进后退按键 1）在页面上加入前进和后退按钮， <button @click=...例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b （路径追加） <router-link :to="{ path: 'relative

2.5K3 0

Vue-Router学习笔记，持续记录

如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。...重定向发生在所有导航守卫之前，并以新的目标位置触发一个新的导航。也可以是一个接收目标路由地址并返回我们应该重定向到的位置的函数。...例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现： 1.导航完成之后获取先完成导航，然后在接下来的组件生命周期钩子中获取数据。...导航故障 1.情形用户已经位于他们正在尝试导航到的页面一个导航守卫通过调用 return false 中断了这次导航当前的导航守卫还没有完成时，一个新的导航守卫会出现了一个导航守卫通过返回一个新的位置...，重定向到其他地方 (例如，return '/login') 一个导航守卫抛出了一个 Error 路由守卫内可以返回一个Promise对象，调用函数导航方法将返回一个对象，通过这个对象可以判断导航成功与否

9.2K4 0

2021，17个最流行的 Vue 插件

vue-meta有以下特点：在组件内设置 metaInfo，便可轻松实现头部标签的管理 metaInfo 的数据都是响应的，如果数据变化，头部信息会自动更新支持 SSR Vue ChartJS...支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖 jQuery 为基础、vue2 过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。...为了确保通过表单从用户那里收集正确类型的数据，有必要验证表单，以确保用户输入符合预期的模式。VeeValidate是一个可以将这一层功能添加到任何表单组件的包。...这个库允许你使用VueJS组件为你的网站轻松创建3D内容。...你可以使用这个库在你的网站上添加一个3D渲染器，并在你的VueJs文件的部分中使用预先建立的组件指定场景细节，如材料、照明、网格、阴影等。

4.4K1 0

$router和$route的区别

$router.push(location[, onComplete[, onAbort]]): 编程式导航，使用$router.push方法导航到不同的URL，此方法会向history栈添加一个新的记录...，当点击浏览器后退按钮时，则回到之前的URL。...$router.go(n): 编程式导航，这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。...$router.getMatchedComponents([location]): 返回目标位置或是当前路由匹配的组件数组，是数组的定义或构造类，不是实例，通常在服务端渲染的数据预加载时使用。...$router.onError(callback): 注册一个回调，该回调会在路由导航过程中出错时被调用，被调用的错误必须是下列情形中的一种，错误在一个路由守卫函数中被同步抛出、错误在一个路由守卫函数中通过调用

1.1K3 0

学一学Flutter新的导航和路由系统

在本文中，我们使用Router去解析浏览器 URL 并且显示相应的页面。...最终会完成一个可以与 URL 栏保持同步的app，并处理来自应用程序和浏览器的后退按钮按下，如下面的 GIF 所示：接下来，创建一个带有 web 支持的新 Flutter 项目并将其中的内容替换lib...使用setState通知框架调用该build()方法，该方法在_selectedBook为 null时返回一个单页列表。...我们无法处理平台的后退按钮，浏览器的 URL 在我们导航时也不会改变。 Router 到目前为止，该应用程序可以显示不同的页面，但它无法处理来自底层平台的路由，例如，、用户更新浏览器中的 URL。...数据类型在RouteInformationParser解析路由信息到用户定义的数据类型，所以我们先定义一个类： class BookRoutePath { final int id; final

4.5K4 0

JSP 防止网页刷新重复提交数据

，或者“怎样才能防止用户点击后退按钮返回以前浏览过的页面？”在ASP论坛上，这个问题也是问得最多的问题之一。遗憾的是，答案非常简单：我们无法禁用浏览器的后退按钮。 ...因为在默认情况下，用户提交表单之后可以通过后退按钮返回表单页面（而不是使用“编辑”按钮！），然后再次编辑并提交表单向数据库插入新的记录。这是我们不愿看到的。 ...不过我注意到，如果使用这种方法，虽然用户点击一下后退按钮时他不会看到以前输入数据的页面，但只要点击两次就可以，这可不是我们希望的效果，因为很多时候，固执的用户总是能够找到绕过预防措施的办法。 ...经过一番仔细的寻寻觅觅之后，我发现仍旧无法找出真正能够完全禁用浏览器后退按钮的办法。所有这里介绍的方法都能够在不同程度上、以不同的方式禁止用户返回前一页面，但它们都有各自的局限。...，我是当用户提交第一次提交第一个页面时，把插入数据库中的记录的自增长id号放到session里，当用户从第二个页面返回到第一个页面再一次提交该页面时，我就用session里的值去数据库查，如果有这个id

11.5K2 0

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

: • push(route) ——导航到一个新的路线 • pop() ——返回一个页面 • popN(n) ——一次返回N页。...一个常见的用例是为每一页设置backgroundColor tintColor字符串型在导航栏中的按钮使用的颜色 1.4 iOS选择器 1.4.1 Props onValueChange 函数型...并返回一个可渲染的组件。 ...renderHeader函数型renderRow函数型 (rowData, sectionID, rowID) => renderable需要从数据源和它的id取走一个数据条目，并返回一个可渲染...3.3 导航器在你的应用程序中使用Navigator来在不同场景之间过渡。

5574 0

React报错之useNavigate() may be used only in context of Router

一旦你的整个应用都被Router组件所包裹，你可以随时随地的在组件中使用react router所提供的钩子。 Jest 如果你在使用Jest测试库时遇到错误，解决办法也是一样的。...，让我们以编程方式进行路由跳转，例如在一个表单提交后。...换句话说，由这种方式导航到新的路由，不会在浏览器历史堆栈中推入新的条目。因此如果用户点击了回退按钮，并不会导航到上一个页面。这是很有用的。...比如说，当用户登录后，你不想让用户能够点击回退按钮，再次回到登录页面。或者说，有一个路由要重定向到另一个页面，你不想让用户点击回退按钮从而再次重定向。...你也可以使用数值调用navigate 函数，实现从历史堆栈中回退的效果。例如，navigate(-1)就相当于按下了后退按钮。

3.3K2 0

：第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

就像我们很常见的一个交互需求，用户提交表单，提交成功后跳转到上一页面，提交失败则留在当前页。...在这一小节的示例中，我将使用编程式导航实现通过点击不同的按钮实现路由间的跳转，最终实现的示意图如下所示。 ? 　　...在之前学习 Vue Router 的基础使用方法时，我们了解到，前端路由的实现方式，实际上就是对于浏览器的 history api 的操作。...方法时，并不会往 history 栈中新增一条新的记录，而是会替换掉当前的记录，因此，你无法通过后退按钮再回到被替换前的页面。...在下面的示例中，在定义路由模板时，我们通过指定需要传递的参数为 props 选项中的一个数据项，之后，我们通过在定义路由规则时，指定 props 属性为 true，即可实现对于组件以及 Vue Router

1.1K1 0

iOS 11 更大的导航（官方翻译版）

导航栏导航栏出现在应用程序屏幕顶部的状态栏下方，并可以通过一系列分层屏幕进行导航。当显示新屏幕时，通常标有前一屏幕标题的后退按钮出现在栏的左侧。...使用标准后退按钮。人们知道标准的后退按钮可以让他们通过信息层次来回溯步骤。但是，如果您实现自定义后退按钮，请确保它仍然像后退按钮，行为直观，与您的界面的其余部分相匹配，并始终贯穿您的应用程序。...如果用自定义图像替换系统提供的返回按钮人字纹，也可以提供自定义遮罩图像。iOS在使用此遮罩时，可以在转换期间为按钮标题设置动画。不要包含多段面包屑路径。...后退按钮总是执行单个操作 - 返回到上一个屏幕。如果您认为在没有当前屏幕的完整路径的情况下，人们可能会迷失方向，请考虑对应用程序的层次结构进行展平。给文本标题按钮足够的空间。...如果您在导航栏中使用分段控件，请仅在层次结构的顶层执行此操作，并确保在较低级别选择准确的后退按钮。有关其他指导，请参阅细分控件。 ? image.png

2.9K3 0

再谈location与history之跳转转态监控—router的两种实现模式

浏览器的历史记录中就会生成一条新记录，用户通过单击"后退"按钮都会导航到前一个页面。...就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。...location.replace(url) ：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的location.reload...如果有 POST 数据提交，则会重新提交数据；如果想要刷新当前的页面，又避免 POST 数据提交，可以使用：window.location.replace( location.href );不刷新当前页面更新内容前端改变浏览器地址而不刷新页面...()：分别为前进一个历史，后退一个，history.go(Number)，其中Number可正可负，即向前或向后若干个记录history.state：返回当前页面状态参数，此参数一般由history.pushState

2.4K1 0

React 入门学习（十二）-- React 路由跳转

与 replace 模式默认情况下，开启的是 push 模式，也就是说，每次点击跳转，都会向栈中压入一个新的地址，在点击返回时，可以返回到上一个打开的地址，就像上图一样，我们每次返回都会返回到上一次点击的地址中...编程式路由导航我们可以采用绑定事件的方式实现路由的跳转，我们在按钮上绑定一个 onClick 事件，当事件触发时，我们执行一个回调 replaceShow 这个函数接收两个参数，用来仿制默认的跳转方式...同时我们可以借助 this.props.history 身上的 API 实现路由的跳转，例如 go、goBack 、goForward 3. withRouter 当我们需要在页面内部添加回退前进等按钮时...' // 在最后导出对象时，用 `withRouter` 函数对 index 进行包装 export default withRouter(index); 这样就能让一般组件获得路由组件所特有的 API...和浏览器中的 history 有所不同噢！

2.8K3 0

jQuery Mobile中jQuery.mobile.changePage方法使用详解

注意该方法是在内部使用的页面加载和转换作为一个结果，点击一个链接或提交表单时。跳转外部页面全部没有效果，必须是内部的DIV页面才有效果。...注意的一些页面转换到另一个页面(changepage请求的页和页是不同的)，他们可能不会如预期的动画。 changeHash:布尔类型，默认为true。...设置为true时地址栏中的Hash更新会创建一个新的浏览器历史记录的影响。设置为false，传入的页面在浏览器历史替换当前页面，用户导航无法通过浏览器的“后退”按钮回到上一个页面。...完成页面转换时要更新浏览器地址的URL地址。如不特别指定，则使用页面page元素的data-url属性值。...只有到to的参数被指定时使用。使用例子如下：添加changehash：假以避免iframe引起的问题。 $.mobile.changePage( "..

1.6K2 0

React 入门学习（十二）-- React 路由跳转

push 与 replace 模式默认情况下，开启的是 push 模式，也就是说，每次点击跳转，都会向栈中压入一个新的地址，在点击返回时，可以返回到上一个打开的地址，就像上图一样，我们每次返回都会返回到上一次点击的地址中...编程式路由导航我们可以采用绑定事件的方式实现路由的跳转，我们在按钮上绑定一个 onClick 事件，当事件触发时，我们执行一个回调 replaceShow 这个函数接收两个参数，用来仿制默认的跳转方式...同时我们可以借助 this.props.history 身上的 API 实现路由的跳转，例如 go、goBack 、goForward 3. withRouter 当我们需要在页面内部添加回退前进等按钮时...' // 在最后导出对象时，用 `withRouter` 函数对 index 进行包装 export default withRouter(index); 这样就能让一般组件获得路由组件所特有的 API...和浏览器中的 history 有所不同噢！

1.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭