vue3 はハッシュ/ヒストリーの 2 つのルーティング モードをどのように切り替えるのですか

この記事では、vue3 でヒストリーとハッシュ ルーティング モードを使用する方法を紹介します。

1. ヒストリーモード

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. ハッシュモード

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

要約すれば：

• 履歴はcreateWebHistoryに対応します
• ハッシュは createWebHashHistory に対応します