当前位置: 首页 > 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页面去

相关文章:

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 {errorRour…...

MyBatis:动态SQL

文章目录 动态SQLif标签trim标签where标签set标签foreach标签include标签和sql标签 Mybatis动态SQL的官方文档: https://mybatis.net.cn/dynamic-sql.html 动态SQL 动态SQL是 MyBatis的强大特性之一,如果是使用JDBC根据不同条件拼接sql很麻烦,例如拼接…...

游戏引擎学习第280天:精简化的流式实体sim

回顾并为今天的内容做铺垫 今天的任务是让之前关于实体存储方式的改动真正运行起来。我们现在希望让实体系统变得更加真实和实用,能够支撑我们游戏实际所需的功能。这就要求我们对它进行更合理的实现和调试。 昨天我们基本让代码编译通过了,但实际上还…...

femap许可与多用户共享

随着电磁仿真技术的发展,Femap作为一款领先的工具,在多个领域中发挥着不可替代的作用。然而,对于许多团队和企业来说,如何高效、经济地管理和使用Femap许可证成为了一个亟待解决的问题。本文将探讨Femap许可与多用户共享的概念、优…...

王树森推荐系统公开课 排序03:预估分数融合

融合预估分数 p c l i c k ⋅ p l i k e p_{click} \cdot p_{like} pclick​⋅plike​ 有实际意义,等于在曝光中点赞的概率。 p c l i c k ⋅ p c o l l e c t p_{click} \cdot p_{collect} pclick​⋅pcollect​ 同理。 按多种排名做 ensemble sort。 某电商的融…...

网络I/O学习-poll(三)

一、为什么要用Poll 由于select参数太多,较于复杂,调用起来较为麻烦;poll对其进行了优化 二、poll机制 poll也是一个系统调用,每次调用都会将所有客户端的fd拷贝到内核空间,然后进行轮询,判断IO是否就绪…...

k8s(12) — 版本控制和滚动更新(金丝雀部署理念)

金丝雀部署简介: 1、基本概念 金丝雀部署是一种软件开发中的渐进式发布策略,其核心思想是通过将新版本应用逐步发布给一小部分用户(即 “金丝雀” 用户),在真实环境中验证功能稳定性和性能表现,再逐步扩大发…...

【git config --global alias | Git分支操作效率提升实践指南】

git config --global alias | Git分支操作效率提升实践指南 背景与痛点分析 在现代软件开发团队中,Git分支管理是日常工作的重要组成部分。特别是在规范的开发流程中,我们经常会遇到类似 feature/user-management、bugfix/login-issue 或 per/cny/dev …...

chrome源码中WeakPtr 跨线程使用详解:原理、风险与最佳实践

base::WeakPtr 在 Chromium 中 不能安全地跨线程使用。这是一个很关键的点,下面详细解释原因及正确用法。 🔍原理与使用 ✅ 先说答案: base::WeakPtr 本质上是**线程绑定(thread-affine)**的。不能在多个线程之间创建…...

【Go】从0开始学习Go

文章目录 从0开始学习Go0 与C对比1 代码框架1.1 helloworld式代码示例1.2 主体代码元素(核心三部分)1.3 其他 2 与C/C区别3 有用的小工具4 注意事项 从0开始学习Go 0 与C对比 特性CGo编译型语言需要编译为机器码直接编译为二进制可执行文件静态类型类型…...

Windows 安装显卡驱动

1.第一步:打开Nvidia 官网驱动下载页面 2.第二步:选择相关信息, 玩游戏选择,GeForce Game Ready ,创意设计、摄影直播 选择 NVIDIA Studio 驱动程序 (NVIDIA Studio Driver - WHQL.) 2.第三步&#xff1…...

模块与包的导入

一、导入官方库 我们复盘下学习python的逻辑,所谓学习python就是学习python常见的基础语法学习你所处理任务需要用到的第三方库 类别典型库解决的问题学习门槛基础工具os、sys、json操作系统交互、序列化数据(如读写 JSON 文件)低科学计算n…...

Google设置app-ads.txt

问题: 应用上架后admob后台显示应用广告投放量受限,需要设置app-ads.txt才行。 如何解决: 官方教程: 看了下感觉不难,创建一个txt,将第二条的代码复制进行就得到app-ads.txt了。 然后就是要把这个txt放到哪才可以…...

docker安装rockerMQ

参考Docker部署RocketMQ5.x (单机部署配置参数详解不使用docker-compose直接部署)_rocketmq不推荐用docker部署-CSDN博客 镜像拉取 镜像地址: https://hub.docker.com/r/apache/rocketmq/tags 我在部署的时候最新发行版是5.1.0可以根据需求自行选择一个5.x的版本&a…...

交叉引用、多个参考文献插入、跨文献插入word/wps中之【插入[1-3]、连续文献】

我们在写论文时,需要插入大量参考文献。 有时,一句话需要引用多个文献,如:[1-3]或者[1,3,4]这种形式多个文献插入、跨文献插入。 在上一篇文章中,我们提到可以直接打“-”或者“,”,但是word导出…...

PLC双人舞:profinet转ethernet ip网关奏响施耐德与AB的协奏曲

PLC双人舞:ethernet ip转profinet网关奏响施耐德与AB的协奏曲 案例分析:施耐德PLC与AB PLC的互联互通 在现代工业自动化中,设备之间的互联互通至关重要。本案例旨在展示如何通过北京倍讯科技的EtherNet/IP转Modbus网关,将施耐德P…...

Image and depth from a conventional camera with a coded aperture论文阅读

Image and depth from a conventional camera with a coded aperture 1. 研究目标与实际意义1.1 研究目标1.2 实际问题与产业意义2. 创新方法:编码光圈设计与统计模型2.1 核心思路2.2 关键公式与模型架构2.2.1 图像形成模型2.2.2 深度可区分性准则2.2.3 统计模型与优化框架2.2…...

缺乏团队建设活动,如何增强凝聚力?

当一个团队缺乏系统性的建设活动时,成员之间容易产生疏离感、误解与信任缺失,最终影响整体执行力和目标达成。要有效增强团队凝聚力,应从设计高参与感的团队活动、结合业务与人文目标、营造持续共创的文化机制、推动跨层级协作互动等层面着手…...

特征筛选方法总结

非模型方法 一.FILTER过滤法: 1.缺失值比例(80%以上缺失则删除)/方差 注意: 连续变量只删方差为0的,因为变量取值范围会影响方差大小。 离散类的看各类取值占比,如果是三分类变量可以视作连续变量。 函数:V…...

力扣HOT100之二叉树:230. 二叉搜索树中第 K 小的元素

这道题直接用最笨的办法来做的&#xff0c;用递归来做&#xff0c;我们定义一个全局变量vector<int> element&#xff0c;然后使用中序遍历&#xff0c;每当碰到一个非空节点就将其加入到向量中&#xff0c;这样依赖当向量中的元素小于k时&#xff0c;就返回0&#xff0c…...

pinia.defineStore is not a function

错误信息表明 pinia.defineStore 不是一个函数,这通常意味着 pinia 没有被正确导入或初始化。 解决方案 检查 Pinia 的导入 确保你从 pinia 中正确导入了 defineStore。正确的导入方式应该是: javascript import { defineStore } from ‘pinia’; 如果你使用的是 createPin…...

入职软件开发与实施工程师了后........

时隔几个月没有创作的我又回来了&#xff0c;这几个月很忙&#xff0c;我一直在找工作&#xff0c;在自考&#xff08;顺便还处理了一下分手的事&#xff09;&#xff0c;到处奔波&#xff0c;心力交瘁。可能我骨子里比较傲吧。我不愿意着急谋生&#xff0c;做我不愿意做的普通…...

PCL点云库点云数据处理入门系列教材目录(2025年5月更新....)

PCL点云库点云数据处理入门系列教材目录 基础阶段 第 1 讲&#xff1a;PCL库简介和安装&#xff08;Win10/11VS2019PCL 1.12.0&#xff09;第 2 讲&#xff1a;PCL库中点云基本知识和数据类型结构第 3 讲&#xff1a;PCL库中点云数据格式PCD和PLY及其输入输出&#xff08;IO&…...

Linux面试题集合(5)

把文件1的内容追加到文件2 cat 文件1>>文件2 把文件1和文件2合并成文件3 cat 文件1 文件2>文件3 使用less查看文件时&#xff0c;搜寻ab字符 /ab 用more和less如何查看文件 more&#xff1a; CtrlF -- 向下滚动一屏 CtrlB -- 返回上一屏 f -- 向下翻屏 b -- 向上翻屏 …...

python动漫论坛管理系统

目录 技术栈介绍具体实现截图系统设计研究方法&#xff1a;设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示 技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理&#xff0c;难度适中&#xf…...

【ubuntu24.04】pycharm 死机结束进程

windows 远程pycharm到ubuntu执行程序 pycharm 在调试过程中&#xff0c;内存耗尽&#xff0c;然后死机了 pycharm 进程 (base) rootk8s-master-pfsrv:/home/zhangbin/下载# ps -ef | grep pycharm root 121245 3230568 0 5月14 pts/8 00:00:00 /bin/bash --rcfile …...

Java 中Supplier延迟生成值的原因

在编程中&#xff0c;延迟生成值&#xff08;Lazy Value Generation&#xff09; 是指将值的计算或生成过程推迟到真正需要使用该值时才执行。这一机制的核心是避免不必要的计算&#xff0c;提升程序的性能和资源利用率。结合 Supplier 和 Optional 的使用场景&#xff0c;我们…...

设置windows10同时多用户登录方法

RDP wrapper 的版本更新停止在2017年&#xff0c; 找到网上其它大神更新的软件&#xff0c; 参考&#xff1a;RDPWrap v1.8.9.9 (Windows家庭版开启远程桌面、Server解除远程数量限制&#xff09; - 吾爱破解 - 52pojie.cn 我的需求是在离线环境中布置&#xff0c;方法是&…...

Web 技术与 Nginx 网站环境部署

这里写目录标题 一. Web基础域名和DNS域名的概念域名的结构域名结构类型 Hosts文件Hosts文件的作用修改Hosts文件 DNS域名注册 网页与HTML网页概述HTML概述HTML基本标签HTML语法规则HTML文件结构 网站和主页Web1.0 与 Web2.0 静态网页与动态网页静态网页动态网页动态网页语言 H…...

分组背包问题:如何最大化背包价值?

有 N 组物品和一个容量是 V 的背包。 每组物品有若干个&#xff0c;同一组内的物品最多只能选一个。 每件物品的体积是 vij &#xff0c;价值是 wij &#xff0c;其中 i 是组号&#xff0c;j 是组内编号。 求解将哪些物品装入背包&#xff0c;可使物品总体积不超过背包容量&…...