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

相关推荐
鹏多多14 小时前
Vue项目i18n国际化多语言切换方案实践
前端·javascript·vue.js
一只小风华~14 小时前
Vue: 侦听器(Watch)
前端·javascript·vue.js
GDAL14 小时前
Knockout.js 备忘录模块详解
javascript·knockout
蓝胖子的多啦A梦14 小时前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼14 小时前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
Bear on Toilet14 小时前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
江城开朗的豌豆14 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了14 小时前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆14 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
码猿宝宝14 小时前
浏览器中javascript时间线,从加载到执行
开发语言·javascript·ecmascript