溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue-router怎么實(shí)現(xiàn)history模式配置

發(fā)布時(shí)間:2022-06-24 11:51:41 來源:億速云 閱讀:990 作者:iii 欄目:開發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“vue-router怎么實(shí)現(xiàn)history模式配置”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue-router怎么實(shí)現(xiàn)history模式配置”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。

    vue-router history模式配置

    一:概述

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

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

    如果使用hash模式,一般無需特殊配置;

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

    使用history模式通常本地調(diào)試沒有什么問題,但是一旦發(fā)布到測(cè)試或生產(chǎn)環(huán)境,則會(huì)出現(xiàn)頁面白屏或者刷新頁面白屏的現(xiàn)象,這種問題的出現(xiàn)是因?yàn)榍岸撕头?wù)端沒有做相應(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)頁面空白
      // 當(dāng)在非本地環(huán)境時(shí),這里以項(xiàng)目test-daily為例,即打包后的h6項(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/',  
      ...... 
    }

    如下圖所示:

    vue-router怎么實(shí)現(xiàn)history模式配置

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

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

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

    vue-router怎么實(shí)現(xiàn)history模式配置

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

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

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

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

    在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模式,地址欄中顯示如下:

    vue-router怎么實(shí)現(xiàn)history模式配置

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

    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è)特性(通過調(diào)用瀏覽器提供的接口)來實(shí)現(xiàn)前端路由。

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

    vue-router怎么實(shí)現(xiàn)history模式配置

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

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

    Vue.prototype.router = router;

    跳轉(zhuǎn)頁面如下:

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

    讀到這里,這篇“vue-router怎么實(shí)現(xiàn)history模式配置”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。

    向AI問一下細(xì)節(jié)

    免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI