vue路由模式及 history 模式下服务端配置

最新推荐文章于 2024-07-10 17:02:01 发布

蚂蚁二娘

最新推荐文章于 2024-07-10 17:02:01 发布

阅读量3.9k

点赞数 6

文章标签： vue.js 哈希算法 tomcat

本文链接：https://blog.csdn.net/web2022050901/article/details/125482338

版权

本文介绍了Vue项目的两种路由模式：hash和history。重点讨论了history模式下需要服务器配置的原因，并提供了解决方案。在history模式中，手动刷新会导致404错误，原因是浏览器将整个URL作为请求地址，而服务器找不到对应资源。解决办法是通过服务器配置URL重写，确保所有请求返回index.html，从而实现路由匹配。

摘要由CSDN通过智能技术生成

本文已参与「新人创作礼」活动，一起开启掘金创作之路

前言

vue 项目中，我们比较常用的模式为 hash 和 history 模式默认情况下，vue 项目采用的就是 hash 模式有些人对 history 模式下，为什么需要服务器做相应配置，以及如何配置不甚理解，所以这篇文章就对此做出分析，重点是让大家理解，为什么 history 模式下需要服务器做配置这里会对 hash 模式和 history 模式都做出说明，通过对比，才能更好的理解我们的行为

1. hash 模式

1.1 什么是 hash 模式

先从一个熟悉的锚标记案例开始，帮助大家理解 hash 模式是怎么回事

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style-type: none;
        }

        li {
            line-height: 30px;
        }

        div {
            height: 800px;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#lish">历史沿革</a></li>
        <li><a href="#mingren">名人典故</a></li>
        <li><a href="#jinri">今日发展</a></li>
        <li><a href="#weilai">未来规划</a></li>
    </ul>

    <div id="lish">
        <h3>历史沿革</h3>
        历史沿革历史沿革历史沿革历史沿革历史沿革历史沿革历史沿革历史沿革
    </div>
    <div id="ming

最低0.47元/天解锁文章

蚂蚁二娘

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
vue路由模式及 history 模式下服务端配置

本文已参与「新人创作礼」活动，一起开启掘金创作之路vue 项目中，我们比较常用的模式为 hash 和 history 模式默认情况下，vue 项目采用的就是 hash 模式有些人对 history 模式下，为什么需要服务器做相应配置，以及如何配置不甚理解，所以这篇文章就对此做出分析，重点是让大家理解，为什么 history 模式下需要服务器做配置这里会对 hash 模式和 history 模式都做出说明，通过对比，才能更好的理解我们的行为先从一个熟悉的锚标记案例开始，帮助大家理解 hash 模式是怎么
复制链接

扫一扫