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