前言
vue路由的三种模式 Hash模式、History模式、abstract 模式
一、Hash模式
- Vue3:
- Hash 模式是用
createWebHashHistory()创建的：
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})
- Vue2
import Router from 'vue-router'
const router = new Router({
node: 'hash',
routes: [
//...
]
})
它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。
二、HTML5 （History）模式
- Vue3
- History模式是用
createWebHistory()创建的：
import { createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
],
})
- Vue2
import Router from 'vue-router'
const router = new Router({
node: 'history',
routes: [
//...
]
})
当使用这种历史模式时，URL也会看起来很 “正常”，例如 https://example.com/user/id
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到下图 404 的错误。这就尴尬了。
Tips:本人参与的项目常见部署访问基本是Nginx，偶尔有使用Internet Information Services (IIS)
- 解决方法如下：
1、nginx配置
修改nginx.conf文件如下：
location / {
try_files $uri $uri/ /index.html;
}
or
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last; # /index.html 为项目根目录
}
2、Internet Information Services (IIS)配置
a、安装 IIS UrlRewrite
b、在网站的根目录下创建一个 web.config 文件，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
三、Abstract 模式
abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，暂未实际使用过，后期补充相关实现
- Vue3
- 在 SSR 上使用时，你需要手动传递相应的 history：
- Abstract 模式是用
createMemoryHistory()创建的：
// router.js
let history = isServer ? createMemoryHistory() : createWebHistory()
let router = createRouter({ routes, history })
// 在你的 server-entry.js 中的某个地方
router.push(req.url) // 请求 url
router.isReady().then(() => {
// 处理请求
})
总结
以上就是Vue不同的历史模式内容，本文简单介绍了Vue History路由模式的使用，而具体的项目配置需根据项目实际情况配置。文章来源：https://www.toymoban.com/news/detail-527579.html
感谢阅读！
参考：Vue路由的不同的历史模式文章来源地址https://www.toymoban.com/news/detail-527579.html
到了这里，关于Vue路由模式（history模式 刷新页面空白解决方案）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
