vue3切换路由模式——Hash 、histoary

1、history模式

使用createWebHistory

bash 复制代码
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})
export default router

2、hash模式

使用createWebHashHistory

bash 复制代码
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})
export default router

综上所述:

history 对应 createWebHistory

hash 对应 createWebHashHistory

相关推荐
源猿人1 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
最后一个农民工1 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖3 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬3 小时前
Promise 的场景和最佳实践
前端·javascript
Asort3 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio3 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly3 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果3 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
普郎特3 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript