vue-router怎么實現history模式配置

本文小編為大家詳細介紹“vue-router怎么實現history模式配置”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue-router怎么實現history模式配置”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

vue-router history模式配置

一：概述

vue-router可以設置兩種模式：hash和history

const router = new VueRouter({ 
  mode: "hash", 
  // mode: "history", 
  routes 
});

如果使用hash模式，一般無需特殊配置；

但如果要使用history模式，則前端和服務端要做一定的設置；

使用history模式通常本地調試沒有什么問題，但是一旦發布到測試或生產環境，則會出現頁面白屏或者刷新頁面白屏的現象，這種問題的出現是因為前端和服務端沒有做相應的配置。

二、實現history模式需要怎樣配置

2.1、前端配置

首先要設置路由的mode和base兩個值，如下：

const routes = [...] 
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,  // 如果使用history模式，必須設置base參數
  routes
});
 
export default router;

其次要設置vue.config.js里的publicPath，如下：

module.exports = {
  // publicPath默認值是'/'，即你的應用是被部署在一個域名的根路徑上
  // 設置為'./'，可以避免打包后的靜態頁面空白
  // 當在非本地環境時，這里以項目test-daily為例，即打包后的h6項目部署服務器的test-daily目錄下
  // 那么這里就要把publicPath設置為/test-daily/，表示所有的靜態資源都在/test-daily/里
  // 打包部署后，會發現index.html引用的靜態資源都添加了路徑/test-daily/
  publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/',  
  ...... 
}

如下圖所示：

至此，前端的配置工作就結束了。

2.2、服務端配置(這里以nginx為例)

官網其實有介紹，只是不太詳細，這里直接上代碼，如下：

location /test-daily表示項目部署在了 /test-daily目錄下，這里要跟vue.config.js里的publicpath的值保持一致。

之所以刷新頁面白屏，其實是因為路由資源不存在，以本項目為例(home為首頁路由的參數)：

https://test.xxx.yy/test-daily/home

當訪問上述路由時，其實根本就不存在相應的資源，當然會404了，為了避免這種情況的發生，可以讓所有的路由都指向index.html就可以解決問題了

在nginx上進行設置： try_files $uri $uri/ /test-daily/index.html        即可。

至此，也就實現了所有的history模式的配置。

mode:“history“的作用

在未設置mode:“history”,vue的路由默認是hash模式，地址欄中顯示如下：

hash：在地址欄中顯示"#"符號（這里的hash不是密碼學中的散列運算）。例如：localhost:8080/#/index，hash的值為#/index。它的特點在于：hash雖然出現在路徑中，但是不會被包括在HTTP請求中，對后端完全沒有影響，因此改變hash不會重新加載頁面。

history利用了H5 history Interface中新增的pushState()和replaceState()方法。（需要特定瀏覽器支持）這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的back、forward、go的基礎上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的Url，但是瀏覽器不會立即向后端發送請求。

綜上：hash模式和history模式都屬于瀏覽器自身的特性，Vue-Router只是利用了這兩個特性（通過調用瀏覽器提供的接口）來實現前端路由。

為了使路徑更加直觀及美觀，就需要使用history模式。只需在router文件夾下的index.js中加入 mode:“history”

關于單頁面交互跳轉，只需要使用router提供的方法即可。

在main.js文件配置中將router綁定到全局

Vue.prototype.router = router;

跳轉頁面如下：

<button @click="toArticle()">跳轉文章頁面</button>
methods:{
    toArticle() {
        this.$router.push('/article')
    }
  }

讀到這里，這篇“vue-router怎么實現history模式配置”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。