通过location输入进行跳转和利用vue-router进行跳转的区别是什么？

参考：彻底搞懂路由跳转：location 和 history 接口

1、BOM对象

BOM（浏览器对象模型）中几个比较重要的对象：window，location,navigator

1. window: BOM的核心对象，既是通过javascript访问浏览器窗口的一个接口，优势ECMAScript中规定的Global对象
2. loaction: 最有用的BOM对象之一，且比较特殊的是，locaton既是window对象的属性，也是document对象的属性，换句话说，window.location和document.location引用的是同一个对象
3. **navigator：**主要用于检测显示网页的浏览器类型。例如：客户端浏览器每次发送 HTTP 请求时，都会附带有一个 user-agent（用户代理）字符串，对于 Web 开发人员来说，可以使用用户代理字符串检测浏览器类型，BOM 在 navigator 对象中定义了 userAgent 属性，利用该属性可以捕获客户端 user-agent 字符串信息

2、浏览器提供的两大API

1. window.location
   • location.href
   • location.hash
   • location.search
   • location.pathname
2. window.history
   • history.pushState()
   • history.replaceState()
   • history.go()
   • history.back()
   • history.forward()

vue路由切换和用location切换url的区别

参考：vue路由切换和用location切换url的区别
总结：vue-router主要通过hash模式和history模式来实现页面跳转，根据mode的值创建不同的history对象：

1. hash模式：创建HashHistory对象，每次hash值变化，会触发hashchange事件
   • HashHistory.push()：将新路由添加到浏览器访问历史的栈顶
   • HashHistory.replace()：替换到当前栈顶的路由
2. history模式: 创建HTML5History对象，当浏览器跳转到新的状态，将触发popstate事件
   • history.pushState()
   • history.replaceState()
   • history.go()
   • history.back()
   • history.forward()
3. abstract模式: 创建AbstractHistory对象

通过location接口：刷新了页面

1. location.href : 赋值时只改变url的hash
2. location.hash: 直接赋值

引进router,使用router.push()：使用diff算法，实现了按需加载，减少DOM消耗

hash模式和history模式对比

参考：vue-router两种模式的区别

1. pushState()设置新的url可以是和当前url同源的任意url;hash只可修改#后面的部分
2. pushState()设置的新url可与当前url一致，这样也会把记录添加到栈中；hash必须设置与当前url不同的url的，才会触发动作将记录添加到栈中
3. pushState()通过stateObject参数可以添加任意类型的数据到记录中；hash只可添加短字符串
4. hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误
5. history模式下，前端的url必须和实际向后端发起请求的url一致，若没有做到路由的全覆盖，会出现404
6. history模式下，不怕前进，不怕后退，就怕f5刷新