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

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会重新加载整个页面，性能相对较低并且没有返回记录

总结

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