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
以上就是vue路由有哪几种模式有什么区别的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
286
