vue3 hash和history模式路由配置

 Hash路由配置

import { createRouter, createWebHashHistory } from 'vue-router';

export const routerData = [
  {
    path: '/views',
    redirect: '/views/login',
    component: () => import('@/layout/layout.vue'),
    children: [
      {
        path: 'login',
        name: 'login',
        meta: {
          title: 'login'
        },
        component: () => import('@/views/login/index.vue')
      },
    ]
  }
]

export const router = createRouter({
  history: createWebHashHistory(),
  routes: routerData
})

history路由配置

import { createRouter, createWebHistory } from 'vue-router';
export const routerData = [
  {
    path: '/views',
    redirect: '/views/login',
    component: () => import('@/layout/layout.vue'),
    children: [
      {
        path: 'login',
        name: 'login',
        meta: {
          title: 'login'
        },
        component: () => import('@/views/login/index.vue')
      },
    ]
  }
]

export const router = createRouter({
  history: createWebHistory(),
  routes: routerData,
  base: "/",
})

在引入main.js中挂在就可以了