vue-router history模式配置

一：概述

vue-router可以設(shè)置兩種模式：hash和history

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

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

但如果要使用history模式，則前端和服務(wù)端要做一定的設(shè)置；

使用history模式通常本地調(diào)試沒(méi)有什么問(wèn)題，但是一旦發(fā)布到測(cè)試或生產(chǎn)環(huán)境，則會(huì)出現(xiàn)頁(yè)面白屏或者刷新頁(yè)面白屏的現(xiàn)象，這種問(wèn)題的出現(xiàn)是因?yàn)榍岸撕头?wù)端沒(méi)有做相應(yīng)的配置。

二、實(shí)現(xiàn)history模式需要怎樣配置

2.1、前端配置

首先要設(shè)置路由的mode和base兩個(gè)值，如下：

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

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

module.exports = {
  // publicPath默認(rèn)值是'/'，即你的應(yīng)用是被部署在一個(gè)域名的根路徑上
  // 設(shè)置為'./'，可以避免打包后的靜態(tài)頁(yè)面空白
  // 當(dāng)在非本地環(huán)境時(shí)，這里以項(xiàng)目test-daily為例，即打包后的h5項(xiàng)目部署服務(wù)器的test-daily目錄下
  // 那么這里就要把publicPath設(shè)置為/test-daily/，表示所有的靜態(tài)資源都在/test-daily/里
  // 打包部署后，會(huì)發(fā)現(xiàn)index.html引用的靜態(tài)資源都添加了路徑/test-daily/
  publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/',  
  ...... 
}

如下圖所示：

至此，前端的配置工作就結(jié)束了。

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

官網(wǎng)其實(shí)有介紹，只是不太詳細(xì)，這里直接上代碼，如下：

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

之所以刷新頁(yè)面白屏，其實(shí)是因?yàn)槁酚少Y源不存在，以本項(xiàng)目為例(home為首頁(yè)路由的參數(shù))：

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

當(dāng)訪問(wèn)上述路由時(shí)，其實(shí)根本就不存在相應(yīng)的資源，當(dāng)然會(huì)404了，為了避免這種情況的發(fā)生，可以讓所有的路由都指向index.html就可以解決問(wèn)題了

在nginx上進(jìn)行設(shè)置： try_files $uri $uri/ /test-daily/index.html        即可。

至此，也就實(shí)現(xiàn)了所有的history模式的配置。

mode:“history“的作用

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

hash：在地址欄中顯示"#"符號(hào)（這里的hash不是密碼學(xué)中的散列運(yùn)算）。例如：localhost:8080/#/index，hash的值為#/index。它的特點(diǎn)在于：hash雖然出現(xiàn)在路徑中，但是不會(huì)被包括在HTTP請(qǐng)求中，對(duì)后端完全沒(méi)有影響，因此改變hash不會(huì)重新加載頁(yè)面。

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

綜上：hash模式和history模式都屬于瀏覽器自身的特性，Vue-Router只是利用了這兩個(gè)特性（通過(guò)調(diào)用瀏覽器提供的接口）來(lái)實(shí)現(xiàn)前端路由。

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

關(guān)于單頁(yè)面交互跳轉(zhuǎn)，只需要使用router提供的方法即可。

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

Vue.prototype.router = router;

跳轉(zhuǎn)頁(yè)面如下：

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論