摘要：本文主要介绍了vue-router两种模式的区别和使用注意事项，并结合实例详细分析了vue-router两种模式的hash模式和history模式的区别、用法和操作注意事项。有需要的可以参考以下。

本文介绍了vue-router两种模式的区别和注意事项。分享给你，供你参考，如下：

Erouter是Vue的官方路由管理器。它与Vue.js的核心深度集成，可以轻松构建单页面应用。Vue-router有默认的哈希模式，另一个是历史模式。

hash模式

hash模式的工作原理是hashchange事件，可以监控窗口中hash的变化。让我们在url后面添加一个#xx来触发这个事件。

window . onhashchange=function(event){

console.log(事件)；

}

打印结果如下：

可以看到有两个属性，newURL和oldURL。您可以通过模拟来更改hsh的值，以动态分页数据。

div id=' test ' style=' height:500 px；宽度：500px边距：0自动'/分度

脚本

window . onhashchange=function(event){

设hash=location . hash . slice(1)；

document.body.style.color=哈希；

document . getelementbyid(' test '). style . background color=hash。

}

/脚本

虽然浏览器没有请求服务器，但是页面状态和url已经有了关联，也就是所谓的前端路由，这是单页面应用的标准。

history模式

打印出window.history对象，可以看到其中提供的方法和记录长度。

前进、后退和跳跃操作方法：

history . go(-3)；//后退三次

history . go(2)；//前进2倍

history . go(0)；//刷新当前页面

history . back()；//后退

history . forward()；//前进

HTML5的新API

A) history.push state (data，title [，URL]):将记录添加到历史堆栈的顶部；触发onpopstate事件时，数据将作为参数传递；Title即页面标题，目前所有浏览器都忽略；Url是页面地址，可选，默认为当前页面地址；

B) history.replacestate (data，title [，URL]):改变当前历史，参数同上；

C)history.state:用于存储上述方法的数据。不同的浏览器有不同的读写权限；

D)window.onpopstate:响应pushState或replaceState的调用；有了这些新的API，对于受支持的浏览器，

我们可以构建具有更好用户体验的应用程序。就像刚才提到的脸书相册，虽然是AJAX，但是用户可以直接复制页面地址分享给好友。

如果你不想难看的哈希，我们可以使用history 模式的路线。这种模式充分利用history.pushStateAPI完成URL跳转，无需重新加载页面。

const router=new VueRouter({

模式：“历史”，

路线：[.]

})

当你使用历史模式，网址就像一个正常的网址，如http://www.yongcun.wang/tclass,它看起来很好！

不过这种模式要想玩好，还是需要后台配置支持的。因为我们的应用是单页面客户端应用，如果后台没有正确的配置，当用户在浏览器中直接访问http://www.yongcun.wang/tclass时，会返回404，不好看。

因此，您应该添加一个覆盖服务器上所有情况的候选资源：如果URL不匹配任何静态资源，您应该返回到同一个index.html页面，这是您的应用程序所依赖的页面。

给出一个警告，因为这样做后，你的服务器将不再返回404错误页面，因为index.html文件将返回所有路径。为了避免这种情况，你要覆盖Vue应用中所有的路由情况，然后给出一个404页面。

const router=new VueRouter({

模式：“历史”，

路线：[

{路径：“*”，组件：NotFoundComponent }

]

})

参考：

https://router.vuejs.org/zh/installation.html

https://www.jb51.net/article/143923.htm

希望本文对vue.js的编程有所帮助

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。