createWebHistory路由和createWebHashHistory路由

一、createWebHistory和createWebHashHistory的区别

vue中常用的两种路由模式：hash路由模式和history路由模式。

hash路由模式

1. URL 示例：http://example.com/#/path
2. 使用 URL 中的哈希（#）部分来模拟路由。
3. 哈希部分的改变不会触发页面刷新，因此称为前端路由。
4. 在单页应用中，前端路由器会监听 URL 的哈希变化，并根据不同的哈希值来渲染相应的组件或页面内容。
5. 哈希路由可以通过修改 location.hash 的方式来改变当前的路由。
6. hash原理：onhashchange事件，可以在window对象上监听这个事件（每次hash值的变化，都会出发hashchange事件，通过这个事件我们就可以知道hash值发生了哪些变化，通过监听hashchange来实现更新页面部分内容操作）
7. hash“#”后的值，不会包含在http请求中，改变hash的值不会引起页面的重新加载（他是前端路由交互处理，#后面hash值变化不会导致浏览器像服务器发送请求，浏览器不发送请求，也就不会刷新页面）；
8. 会创建hashhistory对象，在访问不同的路由会发生两种事件：hashhistory.push()：将新的路由添加到浏览器访问的历史栈顶，hashhistory.replace()替换到当前栈
9. hash可以兼容到ie8以上

优点：兼容性好，可以在不支持 HTML5 History API 的浏览器中正常运行。

缺点：URL 中带有哈希部分，不够美观，且哈希部分对搜索引擎的抓取和索引不友好。

import {createRouter,createWebHashHistory} from "vue-router"
import HelloWorld from '../components/HelloWorld.vue'
import WelcomeItem from '../components/WelcomeItem.vue'
    
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {   
            path:"/",
            component: HelloWorld
        },
        {
            path:"/we",
            component: WelcomeItem
        }
    ]
})

export default router

history模式：

1. URL 示例：http://example.com/path
2. 使用 HTML5 的 History API 来管理路由。
3. 通过修改浏览器的历史记录状态，实现前端路由。
4. 可以使用 history.pushState() 和 history.replaceState() 方法来改变当前的路由状态，而不会触发页面刷新。
5. 前端路由器会监听 URL 的变化，并根据不同的路由状态来渲染对应的组件或页面内容。
6. history依赖于前后端交互，即将url修改的就和正常请求的后端url一样，如后端没有配置对应的/user/id的路由处理，就会返回404错误；
7. history原理：onpopstate事件，当浏览器跳转到新的状态时会触发popstate事件；
8. history可以兼容到ie10；

优点：URL 更加美观，不带有哈希部分，对搜索引擎友好。

缺点：需要浏览器支持 HTML5 History API，不兼容旧版本的浏览器。

在实际开发中，可以根据项目需求和浏览器兼容性考虑选择使用 Hash 路由还是 History 路由。同时，也可以使用前端框架（如 Vue Router 或 React Router）来抽象和简化路由的管理和切换过程。同时建议在生产环境中使用History,在开发环境中使用Hash

import {createRouter,createWebHistory} from "vue-router"
import HelloWorld from '../components/HelloWorld.vue'
import WelcomeItem from '../components/WelcomeItem.vue'
    
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {   
            path:"/",
            component: HelloWorld
        },
        {
            path:"/we",
            component: WelcomeItem
        }
    ]
})

export default router