如何去除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 相关文章推荐
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
原生js中运算符及流程控制示例详解
Jan 05 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
php生成微信红包数组的方法
2019/09/05 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
javascript的BOM
2016/05/03 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python 字符串只保留汉字的方法
2018/11/16 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
英文版区域经理求职信
2013/10/23 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
丧事答谢词大全
2015/09/30 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
python 模块重载的五种方法
2021/04/24 Python
zabbix配置nginx监控的实现
2022/05/25 Servers