前端Vue路由的两种模式

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。目前前端路由主要就是两种hash和history。他们的共同点就是在更改当前网站页面的url，监听url路径的变化，匹配路由规则显示相应的想要展示的内容（不会像后台发出请求更改页面）。

• hash
• history

这两种路由有什么区别呢
总的来说
1.hash带#号，history不带
2.hash兼容性更好，history是html5加的，只支持ie10以上
3.hash不用后端进行配置，history需要后端进行配置刷新指向
4.hash一定要与原路径完全不一样才会添加到栈中，history可以相同并且压入历史记录中
5.而hash只可添加短字符串，history中的pushState通过stateObject可以添加任意类型的数据到记录中

1.hash路由

有个#号，在hash值发生变化的时候，通过hashchange函数来监听hash#后面路由值的变化。根据hash值的不同（也就是不同的路由）来更改所要展示的页面信息。

window.addEventListener(
    'hashchange',
    function (event) {
        console.log(e)
    },
    false
);

2.history路由

• 监听 url 中的路径变化，需要客户端和服务端共同的支持。因为在路由改变时候不会重新向服务端发送请求，但是在刷新页面时，会向服务端重新发送请求，如果服务端没有作配置，那么就会显示404.
• 通过浏览器的window.history模式来记录页面的的历史记录

history.forward(); //在历史记录中前进一步，不刷新页面

history.back(); //在历史记录中后退一步，不刷新页面

history.go(n);//在历史记录中跳转n，比如-1就是后退一步，2就是前进两步不刷新页面

pushState(obj, title, url);//前进到指定的 URL，不刷新页面

replaceState(obj, title, url);//用 url 替换当前的路由，不刷新页面；