DDR爱好者之家

如何去除vue项目中的#及其ie9兼容性
站长资源 2024/11/26 佚名
38 1538
DDR爱好者之家 Design By 杰米

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米