nuxt3实现点击返回上一页代码详解

常见的网站会根据功能分为大致3-5层级,不同层所展示的内容及重要程度也有着差异。在网站访问中我们会根据不同内容进行跳转到不同层级进行内容展示。

这也就意味着在返回上一层页面,也成为了网站中常用的功能之一。通过使用返回上一层操作,一定程度上保留了之前的操作流程也避免数据的多次请求。

本篇文章就来介绍在nuxt3中如何实现返回上一页操作。


一、nuxt3常见返回上一页代码

<a-page-header
title="返回上一页"
@back="() => useRouter().back()"
/>

二、返回上一页方式集合

const router = useRouter();
router.back();
router.forward();
router.go();

基于History API解释

    back: 如果可能的话,回溯历史,和router.go(-1)一样

    forward: 如果可能的话,和 router.go(1)一样,在历史上前进。

    go: 在历史中向前或向后移动,而不受 router.back() 和 router.forward()中强制执行的等级限制。


六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!