Vue-router跳转和location.href的区别及说明

更新时间：2025年01月17日 11:01:31 作者：Cshaosun

Vue Router是Vue.js官方的路由管理器,它允许我们通过定义路由来管理应用程序的不同视图和状态,Vue路由跳转主要有以下几种方式：<router-link>标签、this.$router.push方法、this.$router.replace方法和this.$router.go方法

Vue-router跳转和location.href区别

使用 location.href= /url 来跳转，简单方便，但是刷新了页面

使用 history.pushState( /url ) ，无刷新页面，静态跳转；引进 router ，然后使用 router.push( /url ) 来跳转，使用了 diff算法，实现了按需加载，减少了 dom 的消耗。

注：

使用 router 跳转和使用 history.pushState() 没什么差别的
因为 vue-router 就是用了 history.pushState()
尤其是在 history 模式下

Vue 路由跳转

Vue Router 是 Vue.js 官方的路由管理器，它允许我们通过定义路由来管理应用程序的不同视图和状态。

Vue 路由跳转主要有以下几种方式

1.<router-link> 标签

<router-link to="/about">Go to About</router-link>

2.this.$router.push 方法

this.$router.push('/about');

// 跳转:
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

// 获取参数html职参
$route.query.id
//script取参
this.$route.query.id

3.this.$router.replace 方法

this.$router.replace 方法与 this.$router.push 类似，但它不会向 history 添加新记录，而是替换当前的 history 记录。

this.$router.replace('/about');

4.this.$router.go 方法

this.$router.go 方法用于在 history 记录中前进或后退。

this.$router.go(-1); // 后退一页
this.$router.go(1);  // 前进一页

location.href

相较于Vue Router，location.href= /url会重新加载整个页面，性能相对较低并且没有返回记录

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-openlayers实现地图坐标弹框效果
这篇文章主要为大家详细介绍了vue-openlayers实现地图坐标弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vscode配置vue下的es6规范自动格式化详解
这篇文章主要介绍了vscode配置vue下的es6规范自动格式化详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
vue3中如何使用dayjs
这篇文章主要介绍了vue3中如何使用dayjs问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue 刷新当前路由的实现代码
这篇文章主要介绍了Vue 刷新当前路由的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例
这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库post传送表单json格式数据相关操作实现技巧与注意事项,需要的朋友可以参考下
2023-06-06
Vue3中reactive丢失响应式的问题解决(避大坑!)
这篇文章主要给大家介绍了关于Vue3中reactive丢失响应式的问题解决,vue3中reactive定义的引用类型直接赋值导致数据失去响应式 ,需要的朋友可以参考下
2023-07-07
Vuejs开发环境搭建及热更新【推荐】
Vue.js是目前很火的一个前端框架，采用MVVM模式设计，它是以数据驱动和组件化的思想构建的。本文重点给大家介绍Vuejs开发环境搭建及热更新的相关知识，需要的朋友参考下吧
2018-09-09
vue实现列表滑动下拉加载数据的方法
文章介绍了如何使用Vue实现列表滑动下拉加载数据的功能,通过监听滚动事件,检测用户是否滚动到底部,然后动态加载更多数据,附带了实现思路和案例代码,感兴趣的朋友一起看看吧
2024-11-11
vue数据push后不能响应式更新的问题
这篇文章主要介绍了vue数据push后不能响应式更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
这篇文章主要介绍了详解vue-cli 3.0 build包太大导致首屏过长的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11