vue3如何切换hash/history两种路由模式

本文介绍了在vue3中，如何使用history和hash两种路由模式的方法


1、history模式

使用createWebHistory

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.VITE_APP_API_URL),
 routes
})
export default router


2、hash模式

使用createWebHashHistory

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

https://blog.csdn.net/xiaolinlife/article/details/131292666?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522945ffb1fe63ab71fba54f05e2300dde6%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=945ffb1fe63ab71fba54f05e2300dde6&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-131292666-null-null.142^v102^pc_search_result_base7&utm_term=vue3%20history%20%E6%94%B9%E6%88%90%20hash%20%E6%A8%A1%E5%BC%8F&spm=1018.2226.3001.4187

综上所述：
history 对应 createWebHistory
hash 对应 createWebHashHistory