How does vue3 switch hash/history two routing modes

This article introduces how to use history and hash routing modes in vue3

1. History mode

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

2. hash mode

Use 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

In summary:

• history corresponds to createWebHistory
• hash corresponds to createWebHashHistory