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

vue项目两种路由模式原理和应用

article 2024/12/24 0:06:02

两种模式的区别

路由，让页面url改变，但整个html页面不重新加载，单页面应用，局部刷新页面。

1. hash原理
通过动态锚点技术重写url，如“http://127.0.0.1/#/XXX”，改变#后面的路径，实现切换url（路由）的目的。通过onhashchange监听url变化，来实现对页面的dom的隐藏和显示，看起来像整体页面在切换。

2. history原理
采用history对象中的pushState()函数重写url路径，路径不会带#
注：history.pushState() 方法向浏览器的会话历史栈增加了一个条目。（引用：https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState）

3. 区别和可能存在问题
有没有带#；原理本质不同；
hash模式的项目可能会在第三方app分享时，被标记为不合法地址；
hash 不利于 SEO（搜索引擎优化）;
浏览器需要等待 JavaScript 文件加载完成之后渲染 HTML 文档内容，用户等待时间稍长，可能出现白屏问题。
history模式项目，部署到服务端后，可能出现404的问题，需要后端通过重定向解决。（可能在脚手架环境内解决了这个问题，脱离脚手架环境，仍会出现）；无法兼容ie8 。

4. 在vue项目中，切换路由模式

vue2:

const Router = new VueRouter({
mode:'history',//or hash
routes:[...]
})
Router.afterEach((to, from) => {
    // console.log(to);
})

vue3:

import { createRouter, RouteRecordRaw, createWebHistory, createWebHashHistory } from "vue-router";
const routes: RouteRecordRaw[] = [...];
const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHashHistory(),
  routes,
});