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

相关推荐
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖1 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖1 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
sunbyte3 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录4 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子4 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神4 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao4 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风4 小时前
JS执行机制-event loop
javascript
止观止4 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript