vue路由有哪幾種模式有什么區(qū)別

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

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

vue路由實際上存在三種模式：

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

• History: 以來HTML5 History API 和服務(wù)器配置

• Abstract：支持所有javascript運行模式。如果發(fā)現(xiàn)沒有瀏覽器的API，路由會自動強制進(jìn)入這個模式。

vue-router中默認(rèn)使用的是hash模式，也就是會出現(xiàn)如下的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     }   ] })

區(qū)別

hash模式：

• url路徑會出現(xiàn) # 字符

• hash值不包括在 HTTP 請求中，它是交由前端路由處理，所以改變hash值時不會刷新頁面，也不會向服務(wù)器發(fā)送請求

• hash值的改變會觸發(fā)hashchange事件

history模式：

• 整個地址重新加載，可以保存歷史記錄，方便前進(jìn)后退

• 使用 HTML5 API（舊瀏覽器不支持）和 HTTP服務(wù)端配置，沒有后臺配置的話，頁面刷新時會出現(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ǔ)視頻）