网站优化 流量,炎陵网站建设,北京南站在哪个区哪个街道,小欢喜林磊儿什么网站做家教前言
在前端框架#xff08;如 Vue.js、React 等#xff09;中#xff0c;路由管理通常会配置一个 router 对象来定义 URL 路径与组件的映射关系。
路径#xff08;path#xff09;: 这是浏览器 URL 的一部分#xff0c;比如 /home 或 /about。组件#xff08;compone…前言
在前端框架如 Vue.js、React 等中路由管理通常会配置一个 router 对象来定义 URL 路径与组件的映射关系。
路径path: 这是浏览器 URL 的一部分比如 /home 或 /about。组件component: 这是与该路径相关联的 Vue 组件或其他框架的组件如 Home.vue 或 About.vue。 代码
import { createRouter, createWebHistory } from vue-router;
import Home from /components/Home.vue;
import About from /components/About.vue;
const routes [{path: /home,name: Home,component: Home},{path: /about,name: About,component: About}
];const router createRouter({history: createWebHistory(),routes
});export default router;对于现代开发的项目来说稍微复杂一点的 SPA 都需要用到路由。而 vue-router 正是 vue 的路由标配且 vue-router 有两种模式 hash 和 history 。
Hash模式
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时浏览器并不会重新发起请求而是会触发 onhashchange 事件。 使用Hash模式手写实现一个简单的 SPA 路由功能 创建了两个链接首页 和 关于。它们分别指向 #/home 和 #/about这两个链接通过哈希#实现路由。 创建了一个 div 元素ID 为 viewrouter用于显示根据路由变化而改变的内容。 创建一个 routes 数组其中包含两个路由对象每个对象有 path 和 component 属性。path 是 URL 哈希值component 是要在视图中显示的内容。 onHashChange 函数会在哈希变化时被调用。它首先打印当前的哈希值。 遍历 routes 数组检查当前的哈希值是否匹配路由路径。如果匹配更新 #viewrouter 的 innerHTML 内容为相应的 component。 DOMContentLoaded 事件在初始 HTML 文档被完全加载和解析后触发这样可以立即显示初始内容。 hashchange 事件在 URL 哈希变化时触发确保用户点击链接时能够更新视图。
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#viewrouter{width:100px;height:100px;background-color: blue;}/style/headbodya href#/home首页/aa href#/about关于/adiv idviewrouter/divscriptconst router document.getElementById(viewrouter)const routes [{path: #/home,component: 这是首页},{path: #/about,component: p这是关于/p},]const onHashChange () {console.log(location.hash)routes.forEach(item {if(item.path location.hash){router.innerHTML item.component}});}window.addEventListener(DOMContentLoaded, onHashChange)window.addEventListener(hashchange,onHashChange)/script/body/htmlHistory模式
history API 是 H5 提供的新特性允许开发者直接更改前端路由即更新浏览器 URL 地址而不重新发起请求。
使用History模式手写实现一个简单的 SPA 路由功能
routes 数组定义了路由映射关系。每个路由对象包含 pathURL 路径和 component显示的内容。DOMContentLoaded 事件在文档完全加载和解析后触发onLoad 函数在此时被调用。popstate 事件在浏览器的历史记录条目改变时触发onPopState 函数在此时被调用。获取所有导航链接 (a 标签)并为每个链接添加点击事件监听器。点击链接时调用 e.preventDefault() 阻止默认的浏览器跳转行为。使用 history.pushState() 方法更新浏览器历史记录同时改变 URL。手动调用 onPopState() 更新视图内容。onPopState 函数根据当前 location.pathname 查找匹配的路由。更新 routeView 元素的 innerHTML 显示对应的组件内容。
通过 history.pushState 和 popstate 事件实现了一个简单的前端路由系统
用户点击导航链接时更新 URL 并阻止默认行为。更新浏览器历史记录并根据当前路径显示相应的内容。处理浏览器的返回按钮等历史记录操作时重新渲染正确的内容。 如果对你有所帮助就点个关注吧会持续更新文章
