如何去除vue项目中的#及其ie9兼容性

　　

<强>一,如何去除vue项目中访问地址的#

　　

vue2中在路由配置中添加模式(vue-cli创建的项目在src/路由器/index.js)

　　 　　 　　出口默认新路由器({ 　　模式:“历史”, 　　路线:[ 　　{ 　　路径:“/? 　　名称:“菜单”, 　　组件:菜单, 　　孩子:( 　　{ 　　路径:“组织”, 　　组件:组织, 　　孩子:( 　　{ 　　路径:”, 　　重定向:“organizationSub” 　　}, 　　{ 　　路径:“organizationSub”, 　　组件:organizationSub 　　} 　　] 　　}, 　　{ 　　路径:“用户”, 　　组件:用户 　　}, 　　{ 　　路径:“角色”, 　　组件:角色 　　} 　　] 　　} 　　] 　　}) 　　 　　

<强>二,vue路由原理

　　

2.1,哈希模式:vue-router默认的路由模式。

　　

vue开发的单页面应用,html只有一个,切换时url的变化通过url的散列模式模拟完整的url。

　　

2.2,历史上模式:vue2中配置模式:‘历史’。

　　

利用历史。pushState API完成url的跳转

　　

HTML5历史模式官网介绍:https://router.vuejs.org/zh-cn/essentials/history-mode.html

　　

<强>三、注意事项

　　

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问http://oursite.com/user/id就会返回404,这就不好看了

。 　　

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何静态资源,则应该返回同一个索引。html页面,这个页面就是你应用依赖的页面。

　　

vue-router官网中有介绍,也有后台配置样例:https://router.vuejs.org/zh-cn/essentials/history-mode.html

　　

<强>四,兼容性

　　

经过测试,模式:“历史”在ie9下不生效,若vue项目需要兼容ie9,且后台对访问地址有严格校验,不建议使用此种模式。若是内容有错误或遗漏,欢迎大家批评指正~
　　

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

如何去除vue项目中的#及其ie9兼容性