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父组件监听子组件生命周期
这篇文章主要介绍了Vue父组件监听子组件生命周期,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
Vue Components 数字键盘的实现
这篇文章主要介绍了Vue Components 数字键盘的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
详解vue 模版组件的三种用法
本篇文章主要介绍了详解vue 模版组件的三种用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Vue+Echarts实现简单折线图
这篇文章主要为大家详细介绍了Vue+Echarts实现简单折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的方法代码
这篇文章主要给大家介绍了关于Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的相关资料,Pinia是Vue.js的官方状态管理库,轻量且功能强大,支持模块化和TypeScript,PiniaPluginPersistedState是一个插件,需要的朋友可以参考下
2024-11-11
vue函数@click.prevent的使用解析
这篇文章主要介绍了vue函数@click.prevent的使用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue + Vue-router 同名路由切换数据不更新的方法
本篇文章主要介绍了Vue + Vue-router 同名路由切换数据不更新的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
vue二级路由设置方法
下面小编就为大家分享一篇vue二级路由设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue2.x+webpack快速搭建前端项目框架详解
本文给大家介绍了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端项目框架的详细操作方法，需要的跟着学习下吧。
2017-11-11
Vue实现简单登录界面
这篇文章主要为大家详细介绍了Vue实现简单登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06