hash路由就是带#的路由,history就是不带#的路由,hash路由打包后不需要配置,直接就能访问,history需要在nginx中配置才能正确访问。vue3的hash路由和history路由配置非常简单,通过两个方法创建即可:
一、history
关键字:createWebHistory
import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/userinfo', name: 'UserInfo', component: () => import('../views/UserInfo.vue') }] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
二、hash
关键字:createWebHashHistory import { createRouter, createWebHashHistory } from 'vue-router' const routes = [{ path: '/userinfo', name: 'UserInfo', component: () => import('../views/UserInfo.vue') }] const router = createRouter({ history: createWebHashHistory(), routes }) export default router