前端实现返回上一页面--js、vue、react路由实现

JS原生实现返回上一页

window.history.go(-1); // 返回上一页面 不刷新页面
window.history.back(); // 返回上一页
window.location.href = document.referrer // 返回并刷新页面

Vue路由跳转 或 返回上一页面

// 跳转页面 this.$router.push({ path:'/xxx路由', query:{ id: xx参数, } })

// 页面重定向跳转 this.$router.replace{path："/" }

// 页面获取参数 this.id = this.$route.query.id

// 返回上一页 this.$router.back() // 原理还是访问浏览器历史记录 window.history

React路由跳转｜传参 ｜ 返回上一页面

// 使用useHistory 跳转 useParams 取参
import { useHistory, useParams } from 'react-router-dom'
const history = useHistory() 
// 路由配置为 { path: '/xx/:id/:code', component: Detail } 形式
const jumpPage = () => { history.push('/xx路由/id/code') }
// 获取参数
let params = useParams()
    console.log(params)
    
    
// 使用useLocation 获取参数
import { useHistory,useLocation } from 'react-router-dom';
    const history = useHistory()
    const data = {phone: 131****9274 }
// 路由跳转 
history.push(`/user`, { data });
// 获取
const {data} = useLocation()
    console.log(data)


// 返回上一页
window.history.back()