vue3 vite 动态路由 （）=＞import() 不能使用变量 有时候会有问题

最新推荐文章于 2024-07-31 22:16:31 发布
最新推荐文章于 2024-07-31 22:16:31 发布
阅读量846 收藏 2
点赞数 2
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/callBack_____/article/details/138213733
版权 
function generateRouter(userRouters: Route[]) {
    userRouters.forEach((item: any) => {
        if (item.component == "Layout") {
            item.component = layout
        } else {

            // 错误写法 会有问题 有时候变量不会被解析成字符串
            item.component = () => import(`/src/views${item.componentPath}.vue`)
            // 正确写法
            // item.component = modules[`../views${item.componentPath}.vue`]

        }

        if (item.children && item.children.length != 0) {
            generateRouter(item.children)
        }
    });


    return userRouters
}

 item.component = () => import(`/src/views${item.componentPath}.vue`) 

会有问题 有时候变量不会被解析成字符串

const modules = import.meta.glob('../views/**/*.vue')

获得views文件夹下的说有vue文件 路径 

就不会有问题了

callBack_____
关注
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
vue3+vite+ts+koa2构建vue3 SSR项目
sanstu的博客
10-20 1791
vue3 ssr
解决vue的router组件component在import时不能使用变量问题
10-15
主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 动态加载组件
最新发布
u012285295的博客
07-31 526
【代码】vue3 动态加载组件。
vue3路由component 不能使用require并且import不能传变量问题
m0_46401243的博客
06-16 3439
vue3不能使用require方法，但是import()参数只能是字符串，不能传变量，
Vue import()无法根据变量加载组件
weixin_47030193的博客
12-13 530
我试过了 ()=>import(path)，require，import(""+`${path}`)这些对我都没用，还是无法加载。页面上我使用<component :is="current"></component>想要实现动态切换组件。组件所在路径是数据库表里定义的，所以我需要根据变量来动态加载。但是import()只能写死路径，不能用变量。最后我改成下面这样就可以正常导入了。
Vue3+Vite实现动态路由
热门推荐
weixin_42804664的博客
04-27 1万+
项目基本目录 1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载 import { createRouter, createWebHashHistory } from "vue-router"; import store from '../store/index.js' const routes = [{ path: "/login", component: () => import
vue-router 按需加载 component: () => import() 报错的解决
10-14
主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue-cli3 使用子目录部署问题
10-18
本文主要针对"vue-cli3 使用子目录部署问题"进行深入解析。 首先，当我们在开发环境中使用 `vue-cli3 build` 命令时，通常会在 `vue.config.js` 文件中设置 `baseUrl`。默认情况下，Vue CLI 会生成应用的静态资源，...
vite&vue3中使用批量导入 import.meta.glob import.meta.globEager
m0_67402731的博客
03-01 3070
vite glob-import 官方文档 1.引入库 以 Vuex4+ 批量导入store模块为例 假设有如下目录结构 代码： import { createStore } from 'vuex' 导入模块 const files = import.meta.glob('./module/*.js') 或者 const files = import.meta.globEager('./module/*.js') 注意，路径需为以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析 impo
vue3+vite3（三）动态路由刷新路由失效问题
qq_43654065的博客
11-07 7122
如果不为0，则表示第一次登陆，生成了动态路由，登录后会走匹配路由的方法，不会有问题;如果length为0，表示刷新页面，需要重新执行路由匹配，重新添加动态路由即可。但是如果直接在浏览器地址栏更改网址，或者刷新页面，路由会失效，并自动定位到404页面。不要把404页面定义在固定路由里，而是在动态路由挂载后，再router.push()404页面。页面刷新时，路由重新初始化，动态添加的路由此时已不存在，只有一些固定路由（比如登录页面）还在，所以出现了404的情况。评论区有知道的同学，麻烦指正下。
Vue3中的动态路由
qq_41331633的博客
01-22 3223
最近在用vue3及相关生态完成自己一个小的博客网站搭建来学习时，想到以前开发中遇到菜单生成是由后端返回数据动态生成的，但是这块逻辑不是自己写的，所以理解不深刻。趁着这次学习vue3时准备实操一波。
解决 VUE import不能使用动态变量问题
QQ_930289838
05-12 3544
component: () => import('@/views/xxxx/index') 改为 记得不是单引号而是esc下面~的标识符· component: (resolve) => require([`@/views/${item.url}/index`], resolve),
vue动态路由添加不成功
weixin_47979438的博客
01-07 2688
动态路由添加 根据权限动态加载路由
vite+vue3实现动态路由
qq_36821274的博客
12-05 1217
vite+vue3添加动态菜单渲染
如何在vue3中实现自动注入路由
weixin_44067191的博客
10-12 1185
什么是Automatic Routes 我知道这个概念是来自NuxtJs的一个特性：Automatic Routes（自动注入路由）。 平时使用带有vue-router 的Vue 应用程序时，您必须设置一个配置文件（即 router.js）并手动将所有路由添加到其中。而Nuxt 会根据您提供的 pages 目录中的 Vue 文件为您自动生成 vue-router 配置。这意味着您永远不必再次编写路由器配置！ Nuxt 还为您的所有路由提供自动代码拆分。 Automatic Routes的好处 快速开发：通
Vue3功能实战 —— 动态路由、路由签权、动态组件 使用示例
技术前端，忠于热爱 @0.活在风浪里
07-09 3725
Vue3 动态路由、动态组件使用示例
vue3+vite动态加载路由，本地路由和线上路由匹配
05-17
动态加载路由可以使用 Vue Router 提供的 `async` 函数来实现。在 Vue Router 中，我们可以通过 `routes` 配置项来配置路由，而 `routes` 可以是一个数组，也可以是一个返回数组的函数。这个函数可以异步加载路由配置，比如从服务器获取路由配置信息。 下面是一个简单的例子： ```javascript const router = createRouter({ routes: [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') }, { path: '/dynamic', name: 'Dynamic', component: () => import('@/views/Dynamic.vue') }, // ... ] }) ``` 在这个例子中，我们使用 `import()` 函数来异步加载组件。当用户访问 `/dynamic` 路径时，这个组件才会被动态加载。 为了本地路由和线上路由匹配，我们可以使用环境变量来判断当前是否处于线上环境。比如我们可以在 `.env` 文件中定义一个环境变量 `VUE_APP_ENV`： ```env VUE_APP_ENV=production ``` 然后在代码中使用 `process.env.VUE_APP_ENV` 来获取当前环境变量的值。根据不同的值，我们可以加载不同的路由配置。 下面是一个示例代码： ```javascript const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') }, // ... ] if (process.env.VUE_APP_ENV === 'production') { // 在线上环境加载动态路由 import('@/router/routes.production').then(routes => { router.addRoutes(routes.default) }) } else { // 在本地环境直接使用静态路由 router.addRoutes(routes) } ``` 在上面的代码中，我们先定义了一个静态的路由配置 `routes`，然后根据环境变量的值来加载不同的路由配置。在线上环境下，我们使用 `import()` 函数异步加载一个 `routes.production.js` 文件，该文件返回一个路由配置数组；在本地环境下，我们直接使用静态路由配置。最后使用 `router.addRoutes()` 函数将动态路由添加到路由中。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值