hash模式和history模式

最新推荐文章于 2025-01-23 10:42:08 发布

原创最新推荐文章于 2025-01-23 10:42:08 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue笔记专栏收录该内容

15 篇文章

订阅专栏

文章讲述了VueRouter中的两种路由模式——Hash模式和History模式的工作原理及其特点。Hash模式通过#号来改变URL而不重新加载页面，而History模式使用HTML5historyAPI，无#号但需服务器配置防止404错误。当遇到404时，服务器应配置为将所有未找到的请求重定向到index.html。

hash模式

hash模式就是把路径前面加多一个#，然后再连接到URL后面。#后面path的改变不会引起浏览器向服务器发送请求。

hash的原理是通过监听浏览器的hashchange事件，改变window.location.hash来改变hash值。

hash模式特点

URL中会有一个#
改变URL中的hash值不会引起页面的重新加载
不利于SEO优化
刷新不会出现404

下面是vue-router中配置为hash模式，默认是hash模式

import {createWebHashHistory,createRouter} from 'vue-router'
const router=createRouter({
    history: createWebHashHistory(),
    routes: []
})

history模式

history模式利用HTML5中history的pushState()方法和replaceState()方法改变URL。history模式改变URL同样也不会引起页面的重新加载，它会记录浏览器历史，点击后退按钮会回到上一个页面。

history模式特点

URL中没有#
同样不会引起页面重新加载
找不到URL对应的页面会出现404

在vue-router中配置为history模式

import {createWebHistory,createRouter} from 'vue-router'
const router=createRouter({
    history: createWebHistory(),
    routes: []
})

解决404问题

由于vue是单页面应用，只有一个页面，对于不同的URL请求找不到相应的资源会出现404的情况。为了解决这个问题，需要在服务器上进行配置，当URL没有匹配任何资源就返回index.html页面。

下面这个是Nginx的配置

location / {
  try_files $uri $uri/ /index.html;
}

对上面try_files进行解读：try_files表示尝试读取服务器上静态文件，$uri是Nginx的一个变量，代表用户访问的地址，$uri表示访问的是一个文件，$uri/表示访问的是一个目录。try_files就是尝试到网站读取这个文件，有这个文件就返回；没有这个文件就查找这个目录，找到这个目录返回目录；如果没有找到目录返回最后一个参数/index.html，表示返回网站的index.html文件。