日期:2024年8月6日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
Web
页面的工作方式是通过 HTTP
请求从服务器获取HTML文档,然后由浏览器解析并显示内容。随着 Web
应用的发展,特别是单页应用(SPA
)的流行,需要在不重新加载整个页面的情况下,更新页面的部分内容。Vue Router
支持多种工作模式,每种模式都有其特定的使用场景和配置方式。本文将详细介绍 Vue Router
的三种工作模式:Hash
模式、HTML5 History
模式 和 Abstract
模式。
例如,http://example.com/#/page1 中,#/page1 就是哈希值。
Hash
模式是一种常见的路由工作方式。在这种模式下,URL 中的哈希值被用于表示路由信息。当哈希值发生变化时,页面不会进行重新加载,而是由 Vue Router
来处理路由的切换。这种模式的一个优点是不需要服务器端配置额外的路由,因为 #
后面的内容不会发送到服务器。
语法:
history: createWebHashHistory()
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
在上述代码中,createWebHashHistory()
创建了一个基于 Hash
的历史记录模式。用户访问 /
时会显示 Home
组件,访问 /about
时会显示 About
组件。
http://example.com/page1
HTML5 History
模式利用了 HTML5 History API
,允许我们使用正常的 URL
路径,而不需要在 URL
中包含 #
符号。这种模式提供了更加美观的 URL
,但需要服务器端进行相应的配置,以便在用户访问应用中的不同路径时返回相同的页面。
语法:
history: createWebHistory()
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
使用 createWebHistory()
创建基于 HTML5 History API
的历史记录模式。与 Hash
模式类似,但提供了更为标准的 URL
形式。
Abstract
模式是一种用于非浏览器环境的路由模式,例如在 Node.js
服务器端渲染时使用。这种模式不依赖于浏览器的历史记录 API
,因此可以在任何 JavaScript
环境中运行。
语法:
history: createMemoryHistory()
import { createRouter, createMemoryHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createMemoryHistory(),
routes,
});
export default router;
通过 createMemoryHistory()
创建一个不依赖浏览器历史记录 API
的路由历史模式,适用于特定的环境,如服务器端渲染。
HTML5 History
模式时,务必确保服务器正确配置,否则用户直接访问一个子路由可能会遇到 404 错误。Hash
模式虽然 URL
看起来不够优雅,但它无需服务器端配置,适用于快速原型开发和受限的服务器环境。Abstract
模式通常用于服务器端渲染等特殊场景,不适用于常规的浏览器环境。Vue Router
在 Vue3
中支持 Hash
模式、History
模式和 Abstract
模式。每种模式都有其适用场景和优缺点。在实际开发中,应根据项目需求和部署环境选择合适的模式。对于大多数现代 web
应用,推荐使用 History
模式以获得更好的用户体验和 SEO
优化效果。同时,需要注意服务器配置问题,以确保在 History
模式下刷新页面时不会出现 404 错误。
参考文章:
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/140953290