站長(zhǎng)資訊網(wǎng)
vue路由有三種模式：Hash、History、Abstract。區(qū)別：1、hash模式的url路徑會(huì)出現(xiàn)#字符，其他模式不會(huì)；2、hash值的改變會(huì)觸發(fā)hashchange事件，其他模式不會(huì)；3、history模式整個(gè)地址重新加載，可以保存歷史記錄，方便前進(jìn)后退，其他模式不行。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
vue路由實(shí)際上存在三種模式：
-
Hash: 使用URL的hash值來作為路由。支持所有瀏覽器。
-
History: 以來HTML5 History API 和服務(wù)器配置
-
Abstract：支持所有javascript運(yùn)行模式。如果發(fā)現(xiàn)沒有瀏覽器的API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式。
vue-router中默認(rèn)使用的是hash模式，也就是會(huì)出現(xiàn)如下的URL：，URL中帶有#號(hào)
我們可以用如下代碼修改成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 } ] })
區(qū)別
hash模式：
-
url路徑會(huì)出現(xiàn) # 字符
-
hash值不包括在 HTTP 請(qǐng)求中，它是交由前端路由處理，所以改變hash值時(shí)不會(huì)刷新頁面，也不會(huì)向服務(wù)器發(fā)送請(qǐng)求
-
hash值的改變會(huì)觸發(fā)hashchange事件
history模式：
-
整個(gè)地址重新加載，可以保存歷史記錄，方便前進(jìn)后退
-
使用 HTML5 API（舊瀏覽器不支持）和 HTTP服務(wù)端配置，沒有后臺(tái)配置的話，頁面刷新時(shí)會(huì)出現(xiàn)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
（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）
