```javascript vue-router的两种模式 hash模式：即地址栏 URL 中的 # 符号； history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。 ``` 改变路径的方式有两种: URL的hash 和 HTML5的history ## URL的hash 1. URL的hash也就是锚点(#), 本质上是改变window.location的href属性。通过直接赋值location.hash来改变href, 不会产生http请求， 所以页面不发生刷新。 2. 同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。 3. Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。 ## HTML5的history模式：`mode: 'history'` 五种模式改变URL而不刷新页面: history.pushState() history.replaceState() history.go() history.back() 等价于 history.go(-1) history.forward() 等价于 history.go(1) 这三个接口等同于浏览器界面的前进后退。 ### 使用路由模块来实现页面跳转的方式 * 方式1：直接修改地址栏 * 方式2：this.$router.push(‘路由地址’) * 方式3：`<router-link to="路由地址"></router-link>` ~~~ <button @click="goToMenu" class="btn btn-success">Let's order！</button> ..... <script> export default{ methods:{ goToMenu(){ this.$router.go(-1)//跳转到上一次浏览的页面 this.$router.replace('/menu')//指定跳转的地址 this.$router.replace({name:'menuLink'})//指定跳转路由的名字下 this.$router.push('/menu')//通过push进行跳转 this.$router.push({name:'menuLink'})//通过push进行跳转路由的名字下 } } } </script> ~~~