使用VueRouter的state来实现页面回退功能

最新推荐文章于 2025-10-07 16:57:51 发布
原创 最新推荐文章于 2025-10-07 16:57:51 发布 · 757 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

文章介绍了如何利用VueRouter的state属性来管理页面回退功能。在初次打开页面时没有历史记录，不执行回退。切换页面后产生历史记录，通过监听点击事件，当点击回退按钮时，检查history.state.back，非空则调用router.back()回退，否则用router.push(/)返回首页。另外提到了router.go(-1)作为回退的另一种方式，正数表示前进。

使用VueRouter的state来实现页面回退功能

1.我们首次打开页面是没有历史记录的，所以不用回退

image.png

current:当前所在页面

2.当切换页面后，就生成了历史记录

image.png

3.给回退按钮添加点击事件，根据历史回退到上一页

// 给回退元素绑定点击事件
<van-nav-bar fixed @click="goBack"> </van-nav-bar>

<script setup lang='ts'> 

    // 获取 router 实例 (此处是我封装好的)
    const router = useRouter()
    
    const goBack = () => {
    // 判断历史记录是否为空
        if(history.state?.back) {
            router.back()
        }else {
            router.push('/')
        }
    }
</script>

主要就是router.back() 和router.push()

另一种是router.go(-1)回退，若参数是正数则代表前进

lucky-2000
关注
Vue - 判断页面返回上一页时是否可返回，如不可返回则跳转到首页或其他页（路由 $router.back(-1) 回退时如何判断有没有上一个路由）如果有历史记录则返回上一页，反之跳转到首页
🏆 前端领域优质创作者
08-24 4546
Vue-判断页面返回上一页时是否可返回，如不可返回则跳转到首页或其他页（路由`$router.back(-1`)回退时如何判断有没有上一个路由）vue返回上一页,判断当前页有无上一页，回退页面无效，回退页面如何判断能不能回去？回退页面怎么知道上一页是否可以返回过去？Vue路由back回退时如何判断有没有上一个路由，vue判断是否能返回上一页，vue中如何点击返回上一页，vue判断没有上页返回首页，vue返回上一页，判断当前页有无上一页，Vue路由的`$router.back(-1)`回退时如何判断
vue返回上一页(后退)的几种方法与区别
seimeii的博客
09-20 1584
vue返回上一页(后退)的几种方法与区别
vue3路由传参，使用state替换params
qq_23858785的博客
01-06 3765
vue3路由传参，使用state替换params
Vue3路由跳转传参及接参
最新发布
江拥羡橙的博客
10-07 439
Vue3中Vue Router传参有三种方式：1) 路径参数（动态路由），通过冒号定义参数并在组件中用useRoute获取；2) 查询参数（Query），通过URL问号传参，适合可选参数；3) 状态参数（State），参数不暴露在URL中但刷新会丢失。路径参数适合必要标识，查询参数用于过滤条件，状态参数需配合状态管理工具持久化。示例展示了三种传参方式的定义、传递和接收方法，建议在setup语法糖中使用useRoute替代this.$route。
Vuex与Vue Router-状态管理与路由管理
Superstar23333的博客
06-07 403
是vue 中自带的路由管理工具。可以用于在单一入口项目中进行页面切换。
vue-router 路由 pushstate replacestate popstate 详解
weixin_43856422的博客
10-21 4065
如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。使用虚拟路由的时候，angular 13的drawer 组件监听 popstate 的变化，会清空drawer内容，造成的问题。将当前URL和history.state加入到history中，并用新的state和URL替换当前。state：与要跳转到的URL对应的状态信息。
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
08-29
在开发Vue.js应用程序时，尤其是使用Vue Router进行路由管理和Vuex进行状态管理时，有时我们需要在用户导航回之前的状态时保持页面数据。本篇文章详细介绍了如何利用Vue Router的导航钩子（Navigation Guards）和...
html实现vue回退不刷新，保存原有数据
11-06
- `beforeRouteEnter`: 当从B页面回退到A页面时，这个守卫会在组件实例创建之前调用，因此我们不能直接访问组件实例。我们可以在这里将之前保存的状态读取出来，并通过回调函数传递给组件实例。 2. **状态持久化**...
详解从Vue-router到html5的pushState
12-01
在 Vue 的单页应用（SPA）中，页面不会在每次URL变化时都进行刷新，这是因为 Vue Router 使用了 HTML5 的 `history` API，特别是 `pushState` 和 `replaceState` 方法来实现无刷新的页面跳转。 `pushState` 和 `...
浅析vue-router实现原理及两种模式
10-15
在 History 模式下，如果没有服务器配置，Vue Router 还提供了一个 fallback 选项，当不支持 History 模式时，自动回退到 Hash 模式。 5. **源码分析** Vue Router 的构造函数中，会根据提供的选项初始化各种钩子...
Vue 路由回退页面不刷新？深度剖析及实用解决方案汇总
weimengen的博客
11-27 3535
本文聚焦 Vue 路由跳转回退后页面不刷新问题，深入剖析其产生原因，详细阐述包括监听路由变化、利用多种钩子函数、借助 provide/inject 组合及 Vuex 状态管理等在内的多种实用解决方案，并强调需依项目需求灵活选用，同时注重数据更新时的性能优化，以提升用户体验，助力开发者构建流畅 Vue 应用。
3. vue router 状态管理
架构师的成长之路的博客
04-18 754
更多干货 分布式实战（干货） spring cloud 实战（干货） mybatis 实战（干货） spring boot 实战（干货） React 入门实战（干货） 构建中小型互联网企业架构（干货） python 学习持续更新 ElasticSearch 笔记 kafka storm 实战 (干货) ...
vue3判断历史记录中是否有回退（有的话返回上一页，没有跳转默认页）
weixin_70243424的博客
07-24 1319
【代码】vue3判断历史记录中是否有回退（有的话返回上一页，没有跳转默认页）
Vue单页应用复杂情景下页面回退
Lofan 的博客
05-09 1298
简单情景的页面回退 this.$router.go(-1); 复杂情景下的页面回退，就没有这么简单了。 用 Vue 开发单页应用时，会遇到这种需求情景：跳新页面去筛选、跳新页面去切换活动类型、跳新页面去搜索等等所有跳新页面，拿到值再跳回，进而操作左上角回退。既要保证拿到选中的筛选项回来，又要保证页面回退正常。 具体情景如下： 点了一路的页面，A =》 B =》 C =》 D =》 E ，...
vue­-router路由和前端状态 管理
baidu_33164415的博客
01-08 1467
vue­-router路由和前端状态 管理
vue-router使用beforeEach钩子正确获取vuex里的state值的方法
weixin_42936768的博客
09-28 2552
搜了很多，看到都是直接在router文件里直接引入store文件，实际我试了下还是有bug——state不同步，commit之后还是原来的值。实际上直接调用routers实例的属性即可同步vue实例的store。
日常总结-vue的个两插件vuex（状态管理工具）和router（路由）
Master_yueWang的博客
12-30 931
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
Angular Router: 理解Router State
上食埃土，下饮黄泉
09-21 4924
angular Router（router states）
Vue3登录路由回退判断
AndoMahoro
04-07 945
Vue3登录路由回退判断
vue中如何实现浏览器的回退功能
09-17
<think> 我们参考了用户提供的多个引用，这些引用主要涉及在Vue中阻止浏览器回退的操作。但用户当前的需求是实现浏览器回退功能，而非阻止回退。因此我们需要调整方向，实现正常的回退功能。 在Vue中，我们通常使用Vue Router进行路由管理，包括前进和回退操作。Vue Router提供了`router.go(-1)`方法用于回退到历史记录中的上一个页面。 根据引用[3]中提到的，我们可以使用`router.replace`或者`router.push`来管理路由。但回退功能更直接的是使用`router.go(-1)`。 因此，实现回退功能的方法如下： 1. 在Vue组件中，我们可以通过访问路由实例（通过`useRouter`）来调用`go`方法。 2. 我们可以绑定一个按钮点击事件，当点击按钮时，执行回退操作。 示例代码（使用Vue 3的Composition API）： ```html <template> <button @click="goBack">返回</button> </template> <script setup> import { useRouter } from 'vue-router' const router = useRouter() const goBack = () => { // 回退到上一个页面 router.go(-1) } </script> ``` 注意：`router.go(-1)`相当于浏览器的后退按钮，回退到上一个历史记录。如果历史记录中没有上一个页面，则不会有任何操作。 另外，也可以使用`router.back()`方法，它等同于`router.go(-1)`，但语义更明确。 修改后的代码： ```html <template> <button @click="goBack">返回</button> </template> <script setup> import { useRouter } from 'vue-router' const router = useRouter() const goBack = () => { router.back() } </script> ``` 这样，当用户点击按钮时，就会触发浏览器回退到上一个页面。 但是，需要注意的是，如果用户直接访问了当前页面（即没有上一个历史记录），则回退操作可能无效。因此，我们可以增加一个判断，如果历史记录中存在上一页，则回退，否则跳转到指定的默认页面。 例如： ```javascript const goBack = () => { if (window.history.length > 1) { router.back() } else { router.push('/') // 跳转到首页 } } ``` 不过，Vue Router的`back`方法在无法回退时会抛出错误，我们可以使用`try...catch`来处理，或者使用`router.go(-1)`并检查其返回值（但`router.go`没有明确的返回值表示成功与否）。因此，更常见的方式是使用`window.history.length`来判断历史记录栈的长度。 但是，注意`window.history.length`是浏览器全局的历史记录栈，它包含了整个浏览器会话中访问过的页面数量，而不仅仅是当前标签页。不过，在同一个标签页中，它反映的是当前标签页的历史记录数量。通常，如果长度大于1，说明有上一页。 所以，我们可以这样写： ```javascript const goBack = () => { if (window.history.length > 1) { router.back() } else { router.push('/') } } ``` 但是，在SPA（单页应用）中，由于页面切换并不会增加新的历史记录条目（除非使用了pushState），所以使用`window.history.length`可能不准确。因此，更好的做法是使用Vue Router的导航守卫或者通过其他方式管理路由历史。 实际上，Vue Router内部维护了一个历史记录栈，但它没有直接暴露历史记录的长度。因此，我们可以通过一个全局变量或者状态管理（如Vuex）来记录路由历史，但这增加了复杂性。 对于大多数情况，直接使用`router.back()`即可，如果遇到没有上一页的情况，我们可以捕获错误并跳转到默认页面。Vue Router的`back`方法会返回一个Promise，我们可以这样处理： ```javascript const goBack = () => { router.back().catch(() => { // 当回退失败时，捕获错误，跳转到首页 router.push('/') }) } ``` 或者，我们可以使用`router.go(-1)`，它同样会返回一个Promise，处理方式相同。 因此，最终代码可以这样写： ```html <template> <button @click="goBack">返回</button> </template> <script setup> import { useRouter } from 'vue-router' const router = useRouter() const goBack = () => { // 尝试回退 router.go(-1).catch(() => { // 如果回退失败，则跳转到首页 router.push('/') }) } </script> ``` 但注意，`router.go`和`router.back`在Vue Router 4中（对应Vue 3）返回的是一个Promise，如果导航失败（比如没有历史记录），则会拒绝该Promise。 综上，我们提供了两种实现方式，用户可以根据需要选择。 注意：在Vue Router中，我们通常使用`router.push`来导航到新页面，而回退则使用`router.go`或`router.back`。 另外，如果用户想要在导航栏中显示浏览器的后退按钮，那么不需要额外代码，浏览器自带的按钮即可工作。而我们在页面内放置的“返回”按钮，则是为了在页面内部提供回退操作。 下面我们生成相关问题。 </think> ### Vue 中实现浏览器回退功能的方法 在 Vue 中实现浏览器回退功能，主要通过 **Vue Router** 的路由控制 API 完成。以下是三种常用方法及其实现代码： --- #### 方法 1：使用 `router.go(-1)`（推荐） ```vue <template> <button @click="handleGoBack">返回上一页</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); const handleGoBack = () => { // 回退到历史记录中的上一个页面 router.go(-1); }; </script> ``` **原理**： - `router.go(-1)` 模拟浏览器后退按钮行为 - 回退到历史记录栈中的前一个页面 - 是最接近原生浏览器回退的实现方式[^3] --- #### 方法 2：使用 `router.back()` ```vue <template> <button @click="goBack">返回</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); const goBack = () => { // 等效于 router.go(-1) router.back(); }; </script> ``` **特点**： - 语义更明确，专门用于后退操作 - 与浏览器原生后退行为完全一致[^2] --- #### 方法 3：自定义路由跳转 ```vue <template> <button @click="redirectToPrevious">返回指定页面</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); const redirectToPrevious = () => { // 跳转到指定路径（如首页） router.push('/home'); // 或返回带参数的路由 // router.push({ name: 'HomePage' }); }; </script> ``` **适用场景**： - 需要精确控制返回目标页面时 - 当历史记录栈需要特殊处理时[^4] --- ### 关键注意事项 1. **路由守卫**：可在 `beforeRouteLeave` 中处理回退前的逻辑（如数据保存提示） ```js beforeRouteLeave(to, from) { return confirm('确定离开当前页面？未保存数据将丢失'); } ``` 2. **历史记录管理**： - 使用 `router.replace()` 可替换当前历史记录[^3] - 适用于支付成功页等禁止返回的场景 3. **移动端兼容**： 在移动端需监听物理返回键： ```js mounted() { window.addEventListener('popstate', this.handlePhysicalBack); }, beforeUnmount() { window.removeEventListener('popstate', this.handlePhysicalBack); } ``` 4. **路由传参**： 通过路由状态传递数据： ```js router.push({ path: '/detail', state: { from: 'HomePage' } // 通过 state 传递参数 }); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值