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

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.xdnf.cn/news/7286.html

相关文章:

  • 容器化-K8s-镜像仓库使用和应用
  • Ubuntu Desktop QEMU/KVM中使用Ubuntu Server 22.04配置k8s集群
  • k8s1.27集群部署mysql8.0双主双从
  • psotgresql18 源码编译安装
  • AutoMouser - 单次AI调用铸就高效自动化脚本
  • mariadb 升级 (通过yum)
  • 排序复习/下(C语言版)
  • vuex的基本使用
  • 零基础设计模式——设计模式入门
  • 下载和导出文件名称乱码问题
  • SVG 与 Canvas 技术调研对比
  • BeanFactory和FactoryBean的区别
  • 【Vue篇】潮汐中的生命周期观测站​
  • 10.14 Function Calling与Tool Calling终极解析:大模型工具调用的5大核心差异与实战优化
  • 基于python版本secsgem源码开发gem,应该如何设置devicetype、connectmode
  • Python训练营打卡 Day30
  • Docker安装MySQL数据库-单机版
  • 不锈钢保温容器行业2025数据分析报告
  • Hi3516CV610车牌识别算法源码之——实时从sensor采集视频 识别车牌
  • 使用PHP对接东南亚、日本、印度和印度尼西亚股票数据源
  • 医疗行业手持终端:推动医疗智能化的关键力量
  • 网络Tips20-007
  • lammps后处理:堆垛层错和孪晶的数量统计
  • 养生指南:解锁健康生活新方式
  • 阿里云web端直播(前端部分)
  • kotlin flow的两种SharingStarted策略的区别
  • 远程医疗结合贴肤芯片技术对体育院校学生提升运动表现的路径分析
  • 五分钟完成PolarDB替换postgresql
  • codeup添加流水线docker自动化部署
  • 初识MySQL · 索引