【Vue-Router】路由模式

1. WebHashHistory

index.ts

ts 复制代码
import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from "vue-router";

// 路由模式
//vue2 mode history -> vue3 createWebHistory
//vue2 mode  hash -> vue3  createWebHashHistory
//vue2 mode abstact -> vue3  createMemoryHistory

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../components/login.vue")
  },
  {
    path: "/reg",
    component: () => import("../components/reg.vue")
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router


hash实现

hash是URL中hash()及后面的那部分,常用作描点在页面内进行导航,改变URL中的hash部分不会引起页面刷新

通过hashchange事件监听URL的变化,改变URL的方式只有这几种:

  1. 通过浏览器前进后退改变URL
  2. 通过<a>标签改变URL
  3. 通过window.location改变URL


2. WebHistory

index.ts

ts 复制代码
import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from "vue-router";

// 路由模式
//vue2 mode history -> vue3 createWebHistory
//vue2 mode  hash -> vue3  createWebHashHistory
//vue2 mode abstact -> vue3  createMemoryHistory

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../components/login.vue")
  },
  {
    path: "/reg",
    component: () => import("../components/reg.vue")
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router


history实现

history提供了pushState和replaceState两个方法,这两个方法改变URL的path部分不会引起页面刷新

history提供类似hashchange事件的popstate事件,但popstate事件有些不同:

  1. 通过浏览器前进后退改变URL时会触发popstate事件
  2. 通过pushState/replaceState或<a>标签改变URL不会触发popstate事件
  3. 好在我们可以拦藏pushState/replaceState的调用和<a>标签的点击事件来检测URL变化
  4. 通过js调用history的back,go,forward方法触发该事件

所以监听URL变化可以实现,只是没有hashchange那么方便


但此时切换路径后并不会被监听,需要刷新页面

相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript