vue3切换路由模式——Hash 、histoary

• 算法结构

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

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

综上所述：

history 对应 createWebHistory

hash 对应 createWebHashHistory

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/688259980a.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐