当前位置：首页 > news >正文

wordpress网站模板下载失败网站推广服务报价表

news 2025/7/23 4:51:42

wordpress网站模板下载失败,网站推广服务报价表,广州冼村街道办事处电话,网站支持ipv6做哪些改造前言在前端框架（如 Vue.js、React 等）中，路由管理通常会配置一个 router 对象来定义 URL 路径与组件的映射关系。路径（path）: 这是浏览器 URL 的一部分，比如 /home 或 /about。组件（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 html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#viewrouter{width:100px;height:100px;background-color: blue;}</style></head><body><a href="#/home">首页</a><a href="#/about">关于</a><div id="viewrouter"></div><script>const 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></html>