【vue3】vue3中路由hash与History的设置

fruge365

发布于 2025-12-15 10:33:42

1840

vue3中路由hash与History的设置

history 路由

history 关键字：createWebHistory，修改router/index URL格式：hhh.com/user/id。相比hash模式更加好看。

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 路由

hash 关键字：createWebHashHistory URL格式：www.abc.com/#/vue，它的hash值就是#/vue。

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-11-14，如有侵权请联系 cloudcommunity@tencent.com 删除

router