首頁 > web前端 > js教程 > 主體

vue路由在history模式下刷新時渲染頁面無反映的處理方法

php中世界最好的语言
發布: 2018-04-13 10:51:04
原創
3114 人瀏覽過

這次帶給大家vue路由在history模式下刷新時渲染頁面無反映的處理方法,處理vue路由在history模式下刷新時渲染頁面無反映的注意事項有哪些,下面就是實戰案例,一起來看一下。

解決vue-router嵌套路由(子路由)在history模式下刷新無法渲染頁面的問題,具體內容如下

一. 異常描述

# 原本使用的是vue-router的hash模式,但是hash模式下url需要帶“#”符號,不僅看起來不舒服,而且有些場景下是會破壞路由中的"#"(微信分享頁面就會把" #"後邊的內容處理掉),所以就需要使用history模式,然後就讓後端改下nginx配置:

location / { try_files $uri $uri/ /index.html; }
登入後複製

vue-router使用history模式 使用巢狀路由:

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……
  //我的银行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})
登入後複製

存取路由和嵌套路由頁面,顯示正常,但是刷新頁面的時候,嵌套路由頁面就出異常了:

# vue router嵌套路由在history模式下刷新无法渲染页面问题怎么办?vue router嵌套路由在history模式下刷新无法渲染页面问题怎么办?

頁面樣式全亂了,看下頁面請求載入的靜態檔,所有靜態檔都是404;

vue router嵌套路由在history模式下刷新无法渲染页面问题怎么办?

# 二. 異常解析

# 1. 看下官方文件對嵌套路由的說明:

vue router嵌套路由在history模式下刷新无法渲染页面问题怎么办?

# 2. 再看之前的例外頁面,看來我們的父路由成了根目錄了看下檔案路徑了:

# vue router嵌套路由在history模式下刷新无法渲染页面问题怎么办?

# 3. 看下我們引入這些異常文件,是在index.html文件中直接引用的,也就是在根路徑下引入的。之前的hash模式下,根路徑是不會變的,所以我們在index.html文件中直接引入這些靜態文件,是可行的,但是使用history模式後,根路徑就不固定了。那麼這種引入方式就不可行了,所以才造成了上邊出現的頁面無法渲染的問題:

vue router嵌套路由在history模式下刷新无法渲染页面问题怎么办?

# 三.解決問題

# 這裡有點尷尬,先考慮的主Vue中以Import的方式引入靜態樣式文件,的確可行,但是最後發現,直接修改index.html文件中的靜態文件引入路徑就OK了:

修改前:

<script src="./static/js/stomp.js"></script>
登入後複製

修改後

<script src="/static/js/stomp.js"></script>
登入後複製

四. 原理

# ./ 是指使用者所在的目前目錄(相對路徑);

/ 是指根目錄(絕對路徑,專案根目錄),也就是專案根目錄;

對於hash模式,根路徑是固定的,就是專案的根目錄,但是history模式下,以/開頭的嵌套路徑會被當作根路徑,所以使用“./”引入文件,就會找不到檔案了,因為檔案本身就是在專案根目錄下的,並不在嵌套路徑這個目錄下。

總結,無論hash模式或history模式,可以直接使用「/」從專案根目錄引入靜態檔案。

PS:之前一段時間就遇到這個問題,百度了好久,發現很少人問這個問題,有一個也沒人回答。也問了好些前端大神,還是沒能解決這個問題。也許是平常寫慣了“./” 和「../」這些開頭的路徑了吧,並沒有註意到靜態文件引入方式的問題,折騰了好些方法,最後很尷尬的發現,其實問題很簡單,只是對框架的底層了解不透徹罷了!

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

node.js怎麼連接MySQL

#實作react伺服器渲染的步奏詳解

#

以上是vue路由在history模式下刷新時渲染頁面無反映的處理方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!