vue3 vite 路由
如路由是这种格式
http://localhost:7058/admin/product/brand
路由配置如下
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import {errorRourters} from './router'
import productRouter from './modules.ts/product';
import settin from "@/config/setting";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'layout',component: () => import('@/layout/index.vue'),redirect: '/home',children: [{path: '/home',name: 'home',component: () => import('@/views/home/index.vue'),meta: {title: '首页',}},
...productRouter,{path: '/system',name: 'system',component: () => import('@/layout/index.vue'),meta: {title: '系统',},children: [{path: '/system/user',name: 'systemUser',component: () => import('@/views/system/list/index.vue'),meta: {title: '用户',}},]},]},{path: '/404',name: '404',component: () => import('@/views/error/404.vue'),meta: {title: '404',},},...errorRourters
]
})// 全局前置守卫 路由加载前钩子export default router
vite配置如下
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'//按需自动加载
import Components from 'unplugin-vue-components/vite' //按需自动加载import IconsResolver from "unplugin-icons/resolver"
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //引入element ui插件
// https://vite.dev/config/
export default defineConfig({base: '/admin', //打包后的文件目录plugins: [vue(),vueDevTools(),AutoImport({include: [/\.[tj]sx?$/,/\.vue$/,/\.vue\?vue/,/\.md$/,],resolvers: [ElementPlusResolver(),IconsResolver({prefix: 'Icon',}),],// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等// '@vueuse/core'imports: ['vue','vue-router', 'pinia'],dts: './auto-imports.d.ts'}),Components({resolvers: [// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],}),ElementPlusResolver()],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),'ass':fileURLToPath(new URL('./src/assets', import.meta.url))},},server:{// 服务器主机host:true,// 端口port:7058,// 是否自动打开浏览器open:true,}
})
使用编程式路由的时候应该这样
router.push('/product/brand') 这样就可以了 不需要在加admin,不然会跳转到404页面去