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

最新推荐文章于 2025-10-07 16:57:51 发布

原创最新推荐文章于 2025-10-07 16:57:51 发布 · 757 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

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

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

current:当前所在页面

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

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)回退，若参数是正数则代表前进