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

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页面去

相关文章:

  • 打卡第二十二天
  • C++:判断闰年
  • turf的pointsWithinPolygon排查
  • C++(2)关键字+数据类型 +数据类型输入
  • Linux云计算训练营笔记day11【Linux CentOS7(cat、less、head、tail、lscpu、lsblk、hostname、vim、which、mount、alias)】
  • 技术决策缺乏团队参与,如何增强执行力?
  • YoloV9改进策略:卷积篇|风车卷积|即插即用
  • windows服务器部署jenkins工具(一)
  • 接口排查不能靠猜:实战中如何用抓包工具精准定位问题(含 Charles 使用示例)
  • 【实战教程】如何添加git仓库的子模块
  • V4L2应用程序开发-01数据采集流程
  • MCP与通讯模式:理论与实战体验
  • 【集成电路】集成电路导论知识点
  • MFC 编程中 OnInitDialog 函数
  • 电子电路原理第十六章(负反馈)
  • Mergekit——任务向量合并算法Ties解析
  • 电机控制杂谈(25)——为什么对于一般PMSM系统而言相电流五、七次谐波电流会比较大?
  • 嵌入式51单片机:C51
  • 【Python-Day 15】深入探索 Python 字典 (下):常用方法、遍历、推导式与嵌套实战
  • `asyncio.gather()` 是什么
  • 金爵奖主竞赛单元评委名单公布,中国评委有黄渤、咏梅等人
  • 证监会:证券公司要处理好功能性和盈利性关系,切实维护好投资者利益
  • 述评:赖清德当局上台一年恶行累累
  • 总书记回信二周年之际,上海如何将垃圾分类深度融入城市发展?
  • 纽约市长称墨西哥海军帆船撞桥事故已致2人死亡
  • 广东一驴友在英德野景点溺亡,家属被爆向21名同伴索赔86万