在Vue.js中获取前一个页面的URL，可通过两种常见方式实现：若使用Vue Router，在路由跳转时可通过router.currentRoute.value.from.path获取来源路由路径（需确保跳转时传递了from信息）；若未使用路由，直接使用document.referrer可获取来源页面的完整URL，但需注意该属性在直接打开新标签页或隐私模式下可能为空，实际开发中，需根据项目场景选择合适方法，并结合router.push或window.location等操作确保数据准确性。
Vue.js 获取前一个页面 URL 的实用方案详解
在 Vue.js 应用开发中，获取前一个页面的 URL 是实现功能的关键环节，例如实现“返回导航并携带参数”、“记录用户行为路径”、“基于来源页面的业务逻辑判断”等场景，本文结合 Vue Router 机制与浏览器原生 API，系统介绍三种主流实现方案，分析其适用场景与注意事项，助你灵活应对开发需求。
Vue Router 路由参数传递（推荐）
Vue Router 作为官方路由管理工具，通过 `meta` 字段或动态参数（`params`/`query`）传递来源页信息，实现可控的数据传递与状态同步。
核心原理
在路由跳转时（`router.push`/`router.replace`），将当前页面的完整 URL 作为参数注入目标路由，目标页面通过 `router.currentRoute.value` 即可读取来源信息。
实践代码（Vue 3 示例）
跳转时传递来源 URL：
// 页面 A（来源页）
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const navigateToPageB = () => {
// 传递当前页完整 URL
router.push({
path: '/page-b',
query: { fromUrl: window.location.href }
})
}
return { navigateToPageB }
}
}
目标页面获取来源 URL：
// 页面 B（目标页）
import { useRouter, onMounted } from 'vue-router'
import { ref } from 'vue'
export default {
setup() {
const router = useRouter()
const fromUrl = ref('')
onMounted(() => {
// 安全获取来源参数
fromUrl.value = router.currentRoute.value.query.fromUrl || '未知来源'
console.log('来源页 URL:', fromUrl.value)
})
return { fromUrl }
}
}
方案优势
- 深度集成 Vue Router，适合复杂路由管理场景
- 支持扩展数据传递（如页面标题、用户状态等元数据）
- 可结合路由守卫实现全局来源拦截
注意事项
- 需主动在跳转时传参,适用于可控导航场景（如按钮点击、表单提交）
- 浏览器前进/后退操作需配合 `window.history.state` 或 `popstate` 事件处理
- 长 URL 可能导致查询字符串膨胀，建议使用 `meta` 字段存储
浏览器 History API 存储
利用 History API 的 `pushState`/`replaceState` 方法，在页面跳转时将来源 URL 存储至浏览器历史记录栈，实现无刷新数据传递。
核心原理
在页面卸载前,通过 `history.pushState()` 将来源 URL 写入历史记录，目标页面通过 `window.history.state` 读取数据，并监听 `popstate` 事件处理前进/后退操作。
实践代码
来源页存储数据：
// 页面 A（来源页）
export default {
beforeRouteLeave(to, from, next) {
// 导航前存储来源 URL
history.pushState(
{ fromUrl: window.location.href },
'',
to.fullPath
)
next()
}
}
目标页面读取数据：
// 页面 B（目标页）
import { onMounted, onUnmounted } from 'vue'
export default {
setup() {
const fromUrl = ref('')
const handlePopState = (event) => {
// 处理浏览器前进/后退
if (event.state?.fromUrl) {
fromUrl.value = event.state.fromUrl
}
}
onMounted(() => {
// 初始化读取
fromUrl.value = history.state?.fromUrl || '未知来源'
window.addEventListener('popstate', handlePopState)
})
onUnmounted(() => {
window.removeEventListener('popstate', handlePopState)
})
return { fromUrl }
}
}
方案优势
- 无需手动传参,自动记录导航链路
- 兼容浏览器前进/后退操作
- 存储数据不暴露在 URL 中，提升安全性
注意事项
- 需配合路由守卫或生命周期钩子使用
- 数据仅保存在内存中,刷新页面会丢失
- SPA 中需处理 `popstate` 事件冲突
原生浏览器 API（轻量级方案）
对于简单场景,可直接利用浏览器提供的 `document.referrer` 或 `URL` 对象获取来源信息。
核心原理
`document.referrer` 记录当前页面的来源页 URL，但存在局限性（如 SPA 初始页面可能为空），`URL` 对象可解析当前页面的查询参数。
实践代码
// 任意页面组件
import { ref, onMounted } from 'vue'
export default {
setup() {
const fromUrl = ref('')
onMounted(() => {
// 方式1：通过 referrer 获取
const referrer = document.referrer
if (referrer) {
fromUrl.value = referrer
}
// 方式2：解析当前页 URL 参数
const currentUrl = new URL(window.location.href)
const sourceParam = currentUrl.searchParams.get('from')
if (sourceParam) {
fromUrl.value = decodeURIComponent(sourceParam)
}
})
return { fromUrl }
}
}
方案优势
- 零依赖,无需 Vue Router
- 实现简单,适合轻量级应用
- `URL` 对象支持标准 URL 解析操作
注意事项
<ul
标签： #Vue Router #前一页面url
