首页 > 其他分享 >vue3+vite,写动态路由时候遇到的坑

vue3+vite,写动态路由时候遇到的坑

时间:2024-05-17 19:10:04浏览次数:16  
标签:views component vite vue3 import path 路由

import导入一直报错,看了网上说import不行要写成 require之类的,都试了个遍,结果还是不行。

一个很容易犯的错误:理所当然的以为alias是可以使用的。

事实上写全相对路径就可以了!!!

 

let r = await apis['common/getRouteList']()
const list = r.map((t) => ({
id: t.id,
pid: t.parentId,
name: t.name,
path: t.path,
meta: {
title: t.title,
icon: t.icon,
type: t.type,
},
//正确写法 import(`/src/views${t.component}`)
//错误写法 import(`@/views${t.component}`)
component: () => import(`/src/views${t.component}`)
}));

还是基础不行,忽略了vite的alias

标签:views,component,vite,vue3,import,path,路由
From: https://www.cnblogs.com/marisen/p/18198420

相关文章

  • vuejs3.0 从入门到精通——vite+vue3+ts 显示找不到模块“../views/HomeView.vue”或
    vite+vue3+ts显示找不到模块“../views/HomeView.vue”或其相应的类型声明。ts(2307)一、在根目录下的env.d.ts文件(没有就自己创建)二、在env.d.ts文件中添加以下代码declaremodule'*.vue'{importtype{DefineComponent}from'vue'constcomponent:DefineCo......
  • vue3 ts 集成 tinymce
    首先引入@tinymce/tinymce-vueyarnadd@tinymce/tinymce-vue-S我的版本是然后写一个组件<template><mainid="sample"><Editorv-model="editorData"api-key="j7tvgx4xnptg3cjd63cfnl62z9s78uylw4o7vkkwdljjy91e":init=&qu......
  • Vue3:Cannot read properties of null (reading 'isCE')
    Cannotreadpropertiesofnull(reading'isCE')  这个问题是在vue3中引入elementui的列表框时出现的。经过网上查询,有说是装了两个vue版本的,也有说是其他代码写错导致的,还有说是导入错误的。  但我的不是这个问题,我的是版本兼容问题。因为在网上查询时看到,elementui适......
  • 第八章:路由基础
    第八章:路由基础路由:在特定的拓扑上,选择从source节点到destination节点的路径。一个好的路由算法,即使面对non-uniformtrafficpattern,也能有效地均衡负载,使实际throughput更加接近于理想情况。好的路由算法可以使路径长度尽可能短,从而减少跳数和传输的总延迟1、路由......
  • 基于Vue3水印组件封装:防篡改守护!
    基于Vue3的全新水印通用组件。这款组件不仅功能强大,而且易于集成,能够轻松为您的网页或应用添加自定义水印,有效防止内容被篡改或盗用。在线查看效果:原文可查看效果地址一,编写watermark组件<template><divref="watermarkContainerRef"class="watermark-container">......
  • CVE-2023-34644锐捷路由器漏洞复现
    前序起由是我想看看近两年主流路由器漏洞是如何挖出来的,然后就找到了CVE-2023-34644,该漏洞影响面比较广,比较新,又有一定难度,下面是相关漏洞说明编号:CVE-2023-34644影响面:锐捷旗下睿易NBS3/5/6/7系列、睿易EG系列、睿易EAP/RAP/NBC系列、星耀EW系列CVSS3.1评分:9.8(严重)固件获取......
  • React-路由快速启动指南-全-
    React路由快速启动指南(全)原文:zh.annas-archive.org/md5/64054E4C94EED50A4AF17DC3BC635620译者:飞龙协议:CCBY-NC-SA4.0前言Facebook的React框架重新定义了前端应用程序的构建方式。ReactRouter已成为使用React构建的应用程序的事实标准路由框架。通过其最新的4......
  • vue路由配置
    一目的建一个vue路由 二步骤1.安装路由,顺便打开package.json方便查看版本npminstallvue-router@4 2.src下创建router目录,route目录创建index.js文件import{createRouter,createWebHistory}from"vue-router";//创建路由规则constroutes=[......
  • vue3百科全书
    @目录2.2.【基于vite创建】(推荐)2.3.【一个简单的效果】3.Vue3核心语法3.1.【OptionsAPI与CompositionAPI】3.2.【拉开序幕的setup】setup概述setup的返回值setup与OptionsAPI的关系setup语法糖3.3.【ref创建:基本类型的响应式数据】3.4.【reactive创建:对象......
  • Vue3-示例-全-
    Vue3示例(全)原文:zh.annas-archive.org/md5/84EBE0BE98F4DE483EBA9EF82A25ED12译者:飞龙协议:CCBY-NC-SA4.0前言Vue是主要框架之一,拥有庞大的生态系统,并因其在开发应用时的易用性以及能够帮助你快速实现令人印象深刻的开发结果而不断增加采用率。本书探讨了最新的Vue版本......