本篇文章主要介紹如何去除vue專案中的#及其ie9相容性,現在分享給大家,也給大家做個參考。
一、如何移除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,且後台對存取位址有嚴格校驗,不建議使用此種模式。若是內容有錯誤或遺漏,歡迎大家批評指正~
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
以上是詳細解讀在VUE中有關ie9相容性的詳細內容。更多資訊請關注PHP中文網其他相關文章!