当前位置: 首页 > article >正文

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页面去
http://www.lryc.cn/news/2379905.html

相关文章:

  • MyBatis:动态SQL
  • 游戏引擎学习第280天:精简化的流式实体sim
  • femap许可与多用户共享
  • 王树森推荐系统公开课 排序03:预估分数融合
  • 网络I/O学习-poll(三)
  • k8s(12) — 版本控制和滚动更新(金丝雀部署理念)
  • 【git config --global alias | Git分支操作效率提升实践指南】
  • chrome源码中WeakPtr 跨线程使用详解:原理、风险与最佳实践
  • 【Go】从0开始学习Go
  • Windows 安装显卡驱动
  • 模块与包的导入
  • Google设置app-ads.txt
  • docker安装rockerMQ
  • 交叉引用、多个参考文献插入、跨文献插入word/wps中之【插入[1-3]、连续文献】
  • PLC双人舞:profinet转ethernet ip网关奏响施耐德与AB的协奏曲
  • Image and depth from a conventional camera with a coded aperture论文阅读
  • 缺乏团队建设活动,如何增强凝聚力?
  • 特征筛选方法总结
  • 力扣HOT100之二叉树:230. 二叉搜索树中第 K 小的元素
  • pinia.defineStore is not a function
  • 入职软件开发与实施工程师了后........
  • PCL点云库点云数据处理入门系列教材目录(2025年5月更新....)
  • Linux面试题集合(5)
  • python动漫论坛管理系统
  • 【ubuntu24.04】pycharm 死机结束进程
  • Java 中Supplier延迟生成值的原因
  • 设置windows10同时多用户登录方法
  • Web 技术与 Nginx 网站环境部署
  • 分组背包问题:如何最大化背包价值?
  • nodejs快速入门到精通1