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

相关推荐
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录3 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子3 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神3 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao3 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风3 小时前
JS执行机制-event loop
javascript
止观止3 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
1024小神3 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵3 小时前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
合作小小程序员小小店3 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app