vue路由有哪幾種模式有什麼差別

vue路由有三種模式：Hash、History、Abstract。區別：1、hash模式的url路徑會出現#字符，其他模式不會；2、hash值的改變會觸發hashchange事件，其他模式不會；3、history模式整個地址重新加載，可以保存歷史記錄，方便前進後退，其他模式不行。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

vue路由其實有三種模式：

• #Hash:      使用URL的hash值作為路由。支援所有瀏覽器。

• History:   以來HTML5 History API 與伺服器設定

• Abstract：支援所有javascript運作模式。如果發現沒有瀏覽器的API，路由會自動強制進入這個模式。

vue-router中預設使用的是hash模式，也就是會出現如下的URL：，URL中帶有#號

我們可以用下列程式碼修改成history模式：

import Vue from 'vue'
import Router from 'vue-router'
const userInfo = () => import('@/views/userInfo')
Vue.use(Router)

export default new Router({
  mode: 'history',//hash abstract
  routes: [
    {
      path: '/user-info/:userId',
      component: userInfo
    }
  ]
})

區別

hash模式：

• ##url路徑會出現# 字元

• hash值不包含在HTTP 請求中，它是交由前端路由處理，所以改變hash值時不會刷新頁面，也不會向伺服器發送請求

• hash值的改變會觸發hashchange事件

history模式：

• 整個位址重新加載，可以保存歷史記錄，方便前進後退

• 使用HTML5 API（舊瀏覽器不支援）和HTTP服務端配置，沒有後台配置的話，頁面刷新時會出現404

nginx 配置：

location / {
  try_files $uri $uri/ /index.html;
}

路由取參#

https://xxx.com//user-info/888 

this.$route.params.userId

https://xxx.com//user-info?userId=888

this.$route.query.userId

（學習影片分享：

web前端開發、程式設計基礎影片）

以上是vue路由有哪幾種模式有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！