站長資訊網
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前端開發、編程基礎視頻）
