如何去除vue项目中的#及其ie9兼容性
时间:2019-04-12
本文章向大家介绍如何去除vue项目中的#及其ie9兼容性,主要包括如何去除vue项目中的#及其ie9兼容性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、如何去除vue项目中访问地址的#
vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js)
export default new Router({ mode: 'history', routes: [ { path: '/', name: 'menu', component: menu, children: [ { path: 'organization', component: organization, children: [ { path: '', redirect: 'organizationSub' }, { path: 'organizationSub', component: organizationSub } ] }, { path: 'user', component: user }, { path: 'role', component: role } ] } ] })
二、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
三、注意事项
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
vue-router官网中有介绍,也有后台配置样例:https://router.vuejs.org/zh-cn/essentials/history-mode.html
四、兼容性
经过测试,mode: 'history'在ie9下不生效,若vue项目需要兼容ie9,且后台对访问地址有严格校验,不建议使用此种模式。若是内容有错误或遗漏,欢迎大家批评指正~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 分享几个WordPress本地缓存gravatar评论头像的方案
- Linux下的mongodb服务脚本,以备不时之需
- WordPress发布文章主动推送到百度,加快收录保护原创
- Nginx开启fastcgi_cache缓存加速,支持html伪静态页面
- Go-指针、传值与传引用、垃圾回收
- SEO分享:彻底禁止搜索引擎抓取/收录动态页面或指定路径的方法
- Go-defer,panic,recover
- SEO技巧:Shell脚本自动提交网站404死链到搜索引擎
- Nginx发布1.9.0版本,新增支持TCP代理和负载均衡的stream模块
- WordPress4.2升级修复补丁:解决大量404请求以及评论表情路径及尺寸异常问题
- Linux系统编译安装Redis以及主从复制配置小记
- Go-Maps
- 为WordPress开启Nginx缩略图功能,七牛从此陌路
- 为网站开启Nginx缓存加速,支持html伪静态页面
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法