大家好,我是小杨,一个摸爬滚打了6年的前端老司机。今天咱们来聊聊前端导航跳转的两种常见方式:Vue Router和location.href。别看它们都能实现页面跳转,里面的门道可大不相同!
场景再现:一个让我加班到凌晨的Bug
记得去年做电商项目时,我写了这样一段代码:
javascript
// 订单提交成功后跳转
function onSubmitSuccess() {
location.href = '/order/success'
}
看起来没问题对吧?结果测试时发现用户点击浏览器返回按钮后,居然又回到了订单提交页面,导致重复提交!这就是没用好导航方式惹的祸。今天我就带大家彻底搞懂这两种跳转方式的区别。
核心区别:单页应用 vs 传统页面
1. Vue Router:SPA的优雅导航
Vue Router是专门为单页应用(SPA)设计的导航方案:
javascript
// 编程式导航
this.$router.push('/order/success')
// 或者声明式导航
<router-link to="/order/success">查看订单</router-link>
特点:
- 无刷新跳转(使用History API或hash)
- 保持应用状态不丢失
- 完整的导航生命周期控制
- 平滑的过渡动画支持
2. location.href:简单粗暴的页面跳转
javascript
location.href = '/order/success'
// 等价于
window.location.assign('/order/success')
特点:
- 触发完整页面刷新
- 应用状态完全重置
- 没有导航控制钩子
- 浏览器会显示加载进度条
深度对比:5个维度全面分析
1. 用户体验
Vue Router ✅
- 无刷新跳转,丝般顺滑
- 支持页面过渡动画
- 保持滚动位置(可配置)
html
<transition name="fade">
<router-view></router-view>
</transition>
location.href ❌
- 明显的页面刷新闪烁
- 白屏等待时间
- 滚动位置重置
2. 状态保持
Vue Router ✅
- Vuex/pinia状态保留
- 组件保持活跃(keep-alive)
- 表单数据不会丢失
html
<keep-alive>
<router-view></router-view>
</keep-alive>
location.href ❌
- 所有JavaScript状态重置
- 需要重新初始化应用
- 表单数据会丢失
3. 编程控制
Vue Router ✅
- 完整的导航守卫系统
- 动态路由管理
- 路由元信息控制
javascript
router.beforeEach((to, from, next) => {
if (to.path === '/admin' && !isAdmin()) {
next('/login')
} else {
next()
}
})
location.href ❌
- 只能简单跳转
- 无法拦截或控制
- 没有生命周期概念
4. SEO友好性
Vue Router ⚠️
- 需要额外配置SSR
- 动态标题需要手动设置
- 爬虫可能无法解析动态内容
javascript
router.afterEach((to) => {
document.title = to.meta.title || '默认标题'
})
location.href ✅
- 传统页面天然SEO友好
- 每个页面独立元信息
- 爬虫解析无障碍
5. 浏览器兼容性
Vue Router ⚠️
- History模式需要服务端支持
- IE9+需要polyfill
- 哈希模式兼容性更好
javascript
const router = new VueRouter({
mode: 'history', // 或者 'hash'
routes: [...]
})
location.href ✅
- 所有浏览器100%兼容
- 无需任何特殊配置
- 行为完全一致
实战建议:什么时候用哪个?
使用Vue Router的场景
-
单页应用内部导航
javascript// 商品详情跳转 this.$router.push(`/product/${productId}`)
-
需要保持状态的流程(如多步骤表单)
javascript// 下一步按钮 function goNext() { this.$router.push('/checkout/shipping') }
-
需要导航控制的场景(如权限验证)
javascriptrouter.beforeEach((to, from, next) => { // 登录验证逻辑 })
使用location.href的场景
-
跳转到外部网站
javascript// 跳转到支付网关 location.href = 'https://payment.example.com'
-
传统多页应用
javascript// 后台管理系统中的登出 function logout() { location.href = '/logout' }
-
强制刷新页面(如用户权限变更后)
javascript// 切换账号后强制刷新 function switchAccount() { location.reload() // 或者 location.href = location.href }
高级技巧:混合使用方案
有时候我们需要两种方式配合使用:
javascript
// 检查是否在Vue应用中
function smartNavigate(path) {
if (window.__VUE_APP__ && window.$router) {
this.$router.push(path)
} else {
location.href = path
}
}
// 使用示例
smartNavigate('/about')
常见问题解答
Q:为什么我的Vue Router跳转后页面没变化?
A:常见原因:
- 路由路径拼写错误
- 没有正确调用next()
- 导航守卫中有拦截但未处理
Q:location.href跳转如何传递参数?
A:只能通过URL查询字符串:
javascript
location.href = `/search?keyword=${encodeURIComponent(keyword)}`
Q:如何让Vue Router像location.href一样强制刷新?
A:可以这样实现:
javascript
this.$router.go(0) // 相当于刷新
// 或者
location.reload()
总结
经过6年的实战,我总结出一个简单的选择原则:
能用Vue Router就用Vue Router,必须刷新才用location.href
Vue Router就像高铁 - 快速、舒适、功能齐全;location.href就像绿皮火车 - 虽然慢但哪里都能到。根据你的项目需求选择合适的工具,才能打造最佳用户体验。
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群:906392632
最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!