本文通过实例阐述了vue路由器两种模式的区别及使用中的注意事项。分享给大家参考，如下：

Vue路由器是Vue的官方路由管理器。它与Vue.js的核心深度集成，使得构建单页应用程序变得很容易。vue路由器默认为哈希模式，另一种是历史模式。

hash模式

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

window.onhashchange=function(事件){ console.log(事件)；}打印结果如下：

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

div id=' test ' style=' height : 500 px；宽度： 500 px；margin : 0 auto '/div script window . onhashchange=function(event){ let hash=location . hash . slice(1)；document . body . style . color=hash；document . getelementbyid(' test '). style . background color=hash }/script

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

history模式

打印出窗口. history对象，查看其中提供的方法和记录长度。

向前、向后、跳跃操作方法：

history . go(-3)；//返回3次(2)；//前进两次history . go(0)；//刷新当前页面history . back()；//回溯历史. forward()；//推进HTML5添加的API

a)历史。pushstate(数据，标题[，URL]):在历史堆栈顶部添加一条记录；触发onpopstate事件时，数据作为参数传递；Title是页面标题，目前所有浏览器都忽略了。Url是页面地址，它是可选的，默认为当前页面地址。b)历史。replacestate(数据，标题[，URL]):更改当前历史，参数同上；C)history.state:用于存储上述方法的数据数据，不同的浏览器有不同的读写权限；d)window . onopstate:响应pushState或replaceState的调用；有了这些新的API，我们可以为支持的浏览器构建具有更好用户体验的应用程序。就像刚才提到的脸书相册，虽然是AJAX，但是用户可以直接复制页面地址，分享给朋友。如果不想要难看的hash，可以使用路由历史模式，充分利用history.pushStateAPI完成URL跳转，无需重新加载页面。

Constrouter=newvue路由器({mode:' history '，route: [.]})当你使用历史模式时，网址就像一个普通的网址，比如http://www.yongcun.wang/tclass,也很漂亮！

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

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

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

const router=new vue router({ mode : ' history '，route: [{path3360' *，component3360未找到组件}]})引用：

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

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

希望本文对vue.js程序的设计有所帮助。