欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何去除vue項(xiàng)目中的#及其ie9兼容性

 更新時(shí)間：2018年01月11日 15:43:55   作者：深海魚veritas  
本篇文章主要介紹了如何去除vue項(xiàng)目中的#及其ie9兼容性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、如何去除vue項(xiàng)目中訪問(wèn)地址的#

vue2中在路由配置中添加mode（vue-cli創(chuàng)建的項(xiàng)目在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默認(rèn)的路由模式。

vue開發(fā)的單頁(yè)面應(yīng)用，html只有一個(gè)，切換時(shí)url的變化通過(guò)url的hash模式模擬完整的url。

2.2  history模式：vue2中配置 mode: 'history'。

利用history.pushState API完成url的跳轉(zhuǎn)

HTML5 History 模式官網(wǎng)介紹：https://router.vuejs.org/zh-cn/essentials/history-mode.html

三、注意事項(xiàng)

不過(guò)這種模式要玩好，還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404，這就不好看了。

所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。

vue-router官網(wǎng)中有介紹，也有后臺(tái)配置樣例：https://router.vuejs.org/zh-cn/essentials/history-mode.html

四、兼容性

經(jīng)過(guò)測(cè)試，mode: 'history'在ie9下不生效，若vue項(xiàng)目需要兼容ie9，且后臺(tái)對(duì)訪問(wèn)地址有嚴(yán)格校驗(yàn)，不建議使用此種模式。若是內(nèi)容有錯(cuò)誤或遺漏，歡迎大家批評(píng)指正~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論