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

vue-router的HTML5 History 模式設置

 更新時間:2018年09月08日 14:24:24   作者:darkerXi  
這篇文章主要介紹了vue-router的HTML5 History模式設置,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

VUE是當下最火爆的前端框架之一,vue-router是vue項目中幾乎都會用到的組件,然而體驗一時爽,其實坑不少。本篇經驗將詳細介紹vue-router的兩種mode效果和開發(fā)測試環(huán)境下的問題,并給出解決方案。

vue-router的HTML5 History 模式,這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

當你使用 history 模式時,URL 就像正常的 url,例如 http://yoursite.com/user/id, 就是長這樣的!

不過這種模式要玩好,還需要后臺配置支持。因為我們的應用是個單頁客戶端應用,如果后臺沒有正確的配置,當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404,這就尷尬了。

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

目前后端服務器有Apache、nginx、原生 Node.js、基于 Node.js 的 Express、Internet Information Services (IIS)、Caddy、Firebase 主機等。

先給一個官方標準版配置的傳送門,請戳這里→ https://router.vuejs.org/zh/guide/essentials/history-mode.html

既然是官方給出的配置,那肯定就會說的很官方咯~

按照官方給出的示例,將道理是成功的,但是官方給出的只局限于這個項目在服務器的根目錄下!
如果你的項目沒有放在根目錄下,那么就是這么的不講道理。

下面是在實際開發(fā)中碰到的問題。

我們的后端服務器是nginx,所以按照官方的給出的配置,找到nginx.conf,照抄代碼,修改完后重啟服務器,講道理是成功的。

server
{
  listen 80;
  server_name oursite.com;
  location /test/ {      
    alias /usr/local/test/;
    index index.htm index.html;
    #上面的就是一些常規(guī)配置,下面這個才是重點
    try_files $uri $uri/ /index.html;

    #這里沒有采用官方給出處理404錯誤頁面的方案
    #方案一(把所有沒有后綴名的請求如果404都跳轉到index.html,我們沒有采用)
    #error_page 404 /test/index.html;

    #方案二(404的方式,不是特別完美。會有瀏覽器留下404的狀態(tài)(容易被第三方劫持),以下方式可以避免被第三方劫持?。?
    if (!-e $request_filename) {
      rewrite ^/(.*) /test/index.html last;
      break;
    }
  }
}

但是,事實就是這么的不講道理,我們并沒有成功!這就令人很是郁悶了,心中一萬只神獸羊駝,奔騰而過~ 為什么沒有成功呢,都是按部就班做的呀,完全不講道理!

而真相只有一個,那就是~~~

路由文件中的路徑有問題

const router = new VueRouter({
 mode: 'history',
 routes: [
  { path: '/test/', component: YourComponent },
  { path: '/test/a', component: YourComponent },
  { path: '/test/b:x', component: YourComponent }
 ]
})

在路由文件中所有的路徑前面加上服務器下項目所在的文件名即可,當然也包括<router-link>和this.$router.push()中的路徑,不然又是不講道理的。

這只是在nginx服務器下的一種解決方案,至于別的服務器應該也是同理的。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • react和vue的事件處理差異詳解

    react和vue的事件處理差異詳解

    這篇文章主要介紹了react和vue的事件處理差異,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue中前進刷新、后退緩存用戶瀏覽數據和瀏覽位置的實例講解

    vue中前進刷新、后退緩存用戶瀏覽數據和瀏覽位置的實例講解

    今天小編就為大家分享一篇vue中前進刷新、后退緩存用戶瀏覽數據和瀏覽位置的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Map.vue基于百度地圖組件重構筆記分享

    Map.vue基于百度地圖組件重構筆記分享

    這篇文章主要為大家分享了Map.vue基于百度地圖組件重構筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • vuex通過getters訪問數據為undefined問題及解決

    vuex通過getters訪問數據為undefined問題及解決

    這篇文章主要介紹了vuex通過getters訪問數據為undefined問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue3中使用ref語法糖的示例代碼

    vue3中使用ref語法糖的示例代碼

    Vue3提了一個Ref?Sugar的RFC,即ref語法糖,目前還處理實驗性的(Experimental)階段,今天通過本文給大家介紹vue3中使用ref語法糖的相關知識,感興趣的朋友跟隨小編一起看看吧
    2022-09-09
  • Element中Select選擇器的實現

    Element中Select選擇器的實現

    本文主要介紹了Element中Select選擇器的實現,文中根據實例編碼詳細介紹的十分詳盡,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue.js每天必學之表單控件綁定

    Vue.js每天必學之表單控件綁定

    Vue.js每天必學之表單控件綁定,如何在表單控件元素上創(chuàng)建雙向數據綁定,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 原生echart和vue-echart的使用詳解

    原生echart和vue-echart的使用詳解

    這篇文章主要為大家詳細介紹了原生echart和vue-echart的使用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • Vuejs中的watch實例詳解(監(jiān)聽者)

    Vuejs中的watch實例詳解(監(jiān)聽者)

    本文通過實例代碼給大家介紹了Vuejs中的watch,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2020-01-01
  • 在Vue開發(fā)過程中解決和預防內存泄漏問題的方法詳解

    在Vue開發(fā)過程中解決和預防內存泄漏問題的方法詳解

    Vue作為一款流行的前端框架,已經在許多項目中得到廣泛應用,然而,隨著我們在Vue中構建更大規(guī)模的應用程序,我們可能會遇到一個嚴重的問題,那就是內存泄漏,因此,我們需要認識到在Vue開發(fā)過程中,內存泄漏問題的重要性,本文將給大家介紹如何解決和預防內存泄漏問題
    2023-10-10

最新評論