使用VueRouter实现页面回退功能

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