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


Posted in Javascript onJanuary 11, 2018

一、如何去除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,且后台对访问地址有严格校验,不建议使用此种模式。若是内容有错误或遗漏,欢迎大家批评指正~

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

Javascript 相关文章推荐
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JS中min函数实例讲解
Feb 18 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 #Javascript
详解VUE2.X过滤器的使用方法
Jan 11 #Javascript
Vuex提升学习篇
Jan 11 #Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 #Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 #Javascript
angular2中Http请求原理与用法详解
Jan 11 #Javascript
基于node下的http小爬虫的示例代码
Jan 11 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
img的onload的另类用法
2008/01/10 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python模块smtplib学习
2018/05/22 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python字典按照value排序方法
2020/12/28 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
Java基础面试题
2012/11/02 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
活动总结的格式
2014/05/07 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
2014年内勤工作总结
2014/11/24 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android