如何去除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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
javascript function、指针及内置对象
Feb 19 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Websocket 向指定用户发消息的方法
Jan 09 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python新手学习标准库模块命名
2020/05/29 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Python实现自动整理文件的脚本
2020/12/17 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
亲戚结婚的请假条
2014/02/11 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
谢师宴家长致辞
2015/07/27 职场文书
工作感想范文
2015/08/07 职场文书
工作计划范文之财务管理
2019/08/09 职场文书