vue的幾種路由模式有哪些區別

這篇文章主要介紹了vue的幾種路由模式有哪些區別的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue的幾種路由模式有哪些區別文章都會有所收獲，下面我們一起來看看吧。

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

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

關于“vue的幾種路由模式有哪些區別”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue的幾種路由模式有哪些區別”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。