vue3如何切换hash/history两种路由模式_vue3 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.BASE_URL),
  routes
})
export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

综上所述：

• history 对应 createWebHistory
• hash 对应 createWebHashHistory