Vue Router 详解
hash本质上是改变window.location的href属性 ，你只能改变#后面的url片段。 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新 history接口是HTML5新增的, history 它有五种模式改变URL而不刷新页面. （1）params 刷新页面参数会丢失 （2）query 刷新页面参数不丢失 全局守卫： 跳转前： router.beforeEach((to,from,next)=>{ to: Route : 即将要进入的目标 [路由对象] from: Route : 当前导航正要离开的路由 next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。 next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。 next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在router-link 的 to prop 或 router.push中的选项。 next(error)导航会被终止且该错误会被传递给 router.onError()注册过的回调 }) 跳转后 ： router.afterEach((to,from)=>{// ...}) beforeEnter: (to, from, next) => { } router.push(url) 导航到新url，向 history栈添加一条新访问记录，等同于window.history.pushState router.replace(url) 导航到新url，替换 history 栈中当前记录，等同于window.history.replaceState router.go(n) 在 history 记录中向前或者后退多少步，类似 window.history.go(n) router.go(1) 在浏览器记录中前进一步，等同于 history.forward() router.go(-1) 后退一步记录，等同于 history.back() router.go(0) 刷新当前页面 router.back() 导航回退一步，类似于router.go(-1) router. forward() 导航前进一步，但是不刷新前进页的表单，类似于router.go(1)
21《Vue 入门教程》VueRouter 基础使用
本小节我们介绍如何在 Vue 项目中使用 VueRouter。包括 VueRouter 的下载、什么是 VueRouter、如何使用 VueRouter 配置一个单页应用。其中，学习使用 VueRouter 配置一个单页应用是本节的重点。同学们在学完本节课程之后需要自己多尝试配置路由。 我们可以在官网 (VueRouter) 上直接下载 VueRouter 。 在 Vue 之后引入 VueRouter 会进行自动安装： 在一个模块化的打包系统中，您必须显式地通过 Vue.use () 来安装 Vuex： 在本章节的 VueRouter 学习中，我们都将使用 CDN 的方式引入路由。 用 Vue.js + VueRouter 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 VueRouter 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 VueRouter 在哪里渲染它们。 在使用 VueRouter 之前，我们需要先了解 VueRouter 的两个内置组件： 接下来我们看一个基本例子： 实例演示 "运行案例" 可查看在线运行效果 代码解释： HTML 代码第 12-13 行，我们定义了两个跳转链接； HTML 代码第 15 行，我们使用 组件来渲染匹配组件； JS 代码第 5-7 行，我们定义了组件 Index； JS 代码第 9-11 行，我们定义了组件 Article； JS 代码第 13-16 行，我们定义了路由数组： JS 代码第 18-20 行，创建 router 实例，然后传 routes 配置。 JS 代码第 24 行，通过 router 配置参数注入路由。 本节，我们带大家学习了 VueRouter。主要知识点有以下几点：
vue两种路由模式及原理
vue-router默认的是hash模式. hash模式,是指url尾巴后的#号以及后面的字符.hash也被称为锚点,本身是用来做页面定位的. hash虽然出现在url中,但不会被包括在http请求中,对后端完全没有影响,因此改变hash值不会重新加载页面. hash值的变化不会导致浏览器向服务器发出请求,而hash改变会触发 hashchange 事件(只改变#后面的url片段);hash发生变化url都会被浏览器记录下来,从而可以使用浏览器的前进和后退 对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事: HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由 history模主要是通过 history Api的 pushState() 和 replaceState() 两个方法来实现的. pushState() 可以改变url地址且不会发送请求, replaceState() 可以读取历史记录栈,还可以对浏览器记录进行修改 以上两个方法可以修改历史状态,下面三个方法可以切换(定位)历史状态
vue中路由模式及区别
路由模式默认三种
1.Hash: 使用URL的hash值来作为路由。支持所有浏览器。
2.History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
3.Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。
Hash和History两种路由模式的区别
最明显的区别就是在地址栏中的#号，history模式下#会消失，hash不会。
相同点:
1.当URL改变时，页面不会重新加载;
2.都受页面导航回退前进等影响;
不同点:
1.hash模式背后的原理是onhashchange事件，可以在window对象上监听事件。
2.如果后台没有做相应配置,history页面会在再次刷新的时候,报404;hash则不会出现404报错
3.当改变url时，hash不会请求服务器，history会请求服务器。
当使用vue路由模式history时，进行刷新报错404，解决办法？
1.与后端配合，再刷新时返回首页
2.在Vue应用里面写出一个覆盖全局的方法和一个404页面。
原文链接：https://blog.csdn.net/z591102/article/details/106613284
