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