去除vue项目中的#及其ie9兼容性
一、如何去除vue项目中访问地址的#
vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js)
1 export default new Router({ 2 mode: 'history', 3 routes: [ 4 { 5 path: '/', 6 name: 'menu', 7 component: menu, 8 children: [ 9 { 10 path: 'organization', 11 component: organization, 12 children: [ 13 { 14 path: '', 15 redirect: 'organizationSub' 16 }, 17 { 18 path: 'organizationSub', 19 component: organizationSub 20 } 21 ] 22 }, 23 { 24 path: 'user', 25 component: user 26 }, 27 { 28 path: 'role', 29 component: role 30 } 31 ] 32 } 33 ] 34 })
二、vue路由原理
2.1 hash模式:vue-router默认的路由模式。
vue开发的单页面应用,html只有一个,切换时url的变化通过url的hash模式模拟完整的url。
2.2 history模式:vue2中配置 mode: 'history'。
利用history.pushState API完成url的跳转
HTML5 History 模式官网介绍:https://router.vuejs.org/zh-cn/essentials/history-mode.html
三、注意事项
3.1 后台配置
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问
http://oursite.com/user/id
就会返回 404,这就不好看了。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个
index.html
页面,这个页面就是你 app 依赖的页面。——vue-router官网
vue-router官网中有介绍,也有后台配置样例:https://router.vuejs.org/zh-cn/essentials/history-mode.html
3.2 打包配置
确保在config->index.js中,build下assetsPublicPath配置为绝对路径,如下:
1 build: {assetsPublicPath: '/' }
3.3 Tomcat配置
在tomcat->conf->web.xml中添加如下配置:
<error-page><error-code>404</error-code><location>/index.html</location>
</error-page>
在项目中亲测。
四、兼容性
经过测试,mode: 'history'在ie9下不生效,若vue项目需要兼容ie9,且后台对访问地址有严格校验,不建议使用此种模式。若是内容有错误或遗漏,欢迎大家批评指正~
转载于:https://www.cnblogs.com/veritas-sj/p/7997929.html
去除vue项目中的#及其ie9兼容性相关推荐
- vue 项目中页面打印实现(去除页眉页脚)
vue 项目中页面打印实现 参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统 需求:现需在列表页面添加按钮-----打印协 ...
- Vue项目中最简单的使用集成UEditor方式,含图片上传
Vue 3 项目参考这里 前言 封面是UEditor的 百度指数 折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...
- Vue项目中最简单的使用集成百度UEditor方式,含图片上传
前言 封面是UEditor的 百度指数 折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热度.而不少公司和个人也仍然 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
- vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
- 如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标 前言 iconfont的特色 官网注册 在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
- 【vue】如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
最新文章
- js委托事件-addEventListeners(冒泡方向)
- Winform DataGridView控件添加行号
- 2018年第九届蓝桥杯 - 省赛 - C/C++大学A组 - A. 分数
- Android adb远程调试
- 如何检索Python函数的源代码
- 【flink】Flink 1.12.2 源码浅析 : yarn-per-job模式解析 从脚本到主类
- Raki的读paper小记:LEARNING FAST, LEARNING SLOW : A GENERAL CONTINUAL LEARNING METHOD
- JPack插件停止更新,希望玩wow的朋友可以继续开发这个插件
- 玩转Windows系列之bat脚本
- 在Ubuntu Kylin 优麒麟系统中安装 Etcher镜像烧录软件
- 大华C/C++面试题目解析
- 安装Powerdesigner16.5
- 用计算机三角函数公式,电脑是通过什么公式计算出三角函数的?
- 小红书口碑营销推广方式有哪些?
- 怎样学好高中数学,2019高考数学真题解题技巧
- LeetCode-初级算法-有效的数独 ( java )
- android下面res目录
- k8s 1.20,IPv4/IPv6 双协议栈
- linux 内核 f2fs,f2fs系列之一:实战f2fs 下载、编译和挂载
- 《只是为了好玩:Linux之父林纳斯自传》读后感