一、普通跳转（页面刷新）
1. 使用 window.location 系列方法
• window.location.href
直接修改 URL 实现跳转，保留浏览器历史记录：
methods: {goToHome() {window.location.href = '/home'; // 跳转到首页}
}
• window.location.replace()
替换当前页面，不保留历史记录（适用于登录后跳转等场景）：
methods: {redirectToLogin() {window.location.replace('/login');}
}
2. 动态创建 <a> 标签模拟点击
通过 JavaScript 创建隐藏的 <a> 标签并触发点击事件，适用于需要动态生成跳转链接的场景：
methods: {jumpToExternal(url) {const a = document.createElement('a');a.href = url;a.style.display = 'none';document.body.appendChild(a);a.click();document.body.removeChild(a);}
}
二、无刷新跳转（单页应用效果）
1. 使用 history.pushState()
通过 HTML5 History API 修改 URL 并动态加载组件，实现无刷新跳转：
methods: {goToDetails(id) {// 修改 URLhistory.pushState({ path: `/details/${id}` }, '', `/details/${id}`);// 手动加载组件（需自行实现逻辑）this.loadComponent(`/details/${id}`);},loadComponent(path) {// 根据路径渲染对应组件（如使用动态组件或条件渲染）this.currentComponent = path === '/details' ? DetailsComponent : null;}
}
注意：需监听 popstate 事件处理浏览器前进/后退操作：
mounted() {window.addEventListener('popstate', (event) => {if (event.state?.path) {this.loadComponent(event.state.path);}});
}
2. 条件渲染组件
通过 Vue 的 v-if 或动态组件 (<component :is="">) 切换显示内容，模拟页面跳转效果：
<template><div><Home v-if="currentPage === 'home'" /><About v-if="currentPage === 'about'" /><button @click="currentPage = 'about'">跳转到关于页</button></div>
</template>
<script>
export default {data() {return { currentPage: 'home' };}
};
</script>
四、其他场景
1. 新窗口打开页面
通过 window.open() 实现新窗口跳转（如打开外部链接）：
methods: {openNewWindow() {window.open('https://example.com', '_blank');}
}
技术选型建议
| 方法 | 适用场景 | 优缺点 |
|---|---|---|
window.location | 简单跳转或外部链接 | 实现简单，但会触发页面刷新 |
history.pushState | 单页应用无刷新跳转 | 需手动处理组件加载和浏览器历史事件 |
| 动态组件条件渲染 | 少量页面切换 | 无需路由，但维护成本随页面数量增加而提高 |
| URL参数/LocalStorage | 跨页面传参 | 数据需手动管理，可能存在安全性问题 |
)
