当前位置: 首页 > 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页面去
http://www.dtcms.com/a/201260.html

相关文章:

  • 打卡第二十二天
  • 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()` 是什么
  • Chrome插件学习笔记
  • 专题五:floodfill算法(太平洋大西洋水流问题)
  • POJ3107树的重心
  • java collection集合特点知识点详解
  • Golang的Web应用架构设计
  • CentOS相关操作hub(更新中)
  • Hooks实现原理与自定义Hooks
  • 头歌之软件工程-用例设计
  • 【C++】不推荐使用的std::allocator<void>
  • ETL数据集成产品选型需要关注哪些方面?