Vue中路由到一个公共组件，然后根据路径中是否存在文件动态加载组件

最新推荐文章于 2024-08-07 15:16:14 发布
最新推荐文章于 2024-08-07 15:16:14 发布
阅读量2.4k 收藏 5
点赞数 2
分类专栏： vue入门 文章标签： vue 路由 动态加载 多个路由 插件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/codeex/article/details/115674542
版权
本文介绍如何在Vue中实现一个组件对应多个路由，并根据路径动态加载组件。通过vue-element-admin定义路由，利用component组件和require动态加载未在路由中预先定义的组件。遇到webpackage对import的限制时，采用require配合try-catch处理，确保组件能正确加载。应用场景包括自定义页面和常规业务场景的扩展。
摘要由CSDN通过智能技术生成

这个需求咋这么奇怪呢？这个需求想让一个组件完成默认兜底的功能，比如某个产品的显示，然后又留出定制化的功能，直接在固定的路径中编写vue，而不用再次定义路由。哎，写到这里，感觉再手动定制下路由就可以了。

1、实现多个路由1个组件

这个直接定义即可，我使用的是 vue-element-admin，因此定义的路由如下：
这里使用import，webpackage可以支持动态载入组件，当然直接引入组件也是可以的。

{
   
    path: '/test',
    component: Layout,
    hidden: false
了解本专栏 订阅专栏 解锁全文 超级会员免费看
webmote
关注
专栏目录
订阅专栏
Vue组件和路由
Jinx_baobao的博客
03-25 3617
目录 一、父组件传值子组件 1、接受父组件传值 2、设置传递类型 3、data和props的区别 二、子组件传值父组件 1、子组件调用父组件的方法 三、ref的使用 1、获取dom节点 2、获取组件 四、Vue中路由的使用 1、什么是路由 2、如何使用路由 3、路由的跳转 1.声明式跳转 2.函数式跳转 四、路由重定向 五、选中路由高亮 六、组件的嵌套 七、命名视图 八、计算属性和监听器 watch用法： Computed用法 属性计算 不能和data里面.
vue路由添加.html,vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式...
weixin_30934229的博客
06-25 1086
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq_31906983/article/details/89054798工作中我们经常会遇到这种需求，后台定义用户的权限数据，前端进行获取，并渲染在侧边栏导航上，不同权限的用户看到的侧边栏是不同的。即前端渲染的数据是随着后台的改变而改变的，做...
Vue主动检测文件是否存在 模块管理用
忧天的杞人
04-19 3486
Vue 验证文件是否存在 最近写项目时遇到一个情况：使用管理系统管理模块时，输入想要关联的组件时如果填写错误，会导致一些异常。 于是乎，找到了一个解决方法。
Vue使用require.context()判断本地目录是否存在某个文件
weixin_42966151的博客
12-19 4150
Vue使用require.context()判断本地目录是否存在某个文件
给我5分钟，保证教会你在vue3中动态加载远程组件
最新发布
sdgfafg_25的博客
08-07 1180
这篇文章讲了在vue3中如何从服务端加载远程组件，首先我们需要使用方法定义一个异步组件，这个异步组件是可以直接在template中像普通组件一样使用。但是由于接收的组件必须是编译后的vue组件对象，而我们从服务端拿到的远程组件就是一个普通的vue文件，所以这时我们引入了包。包的作用就是在运行时将一个vue文件编译成vue组件对象，这样我们就可以实现从服务端加载远程组件了。前端欧阳引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构。
路径是否存在 如果不存在则创建此路径
weixin_47516566的博客
04-15 150
【代码】路径是否存在 如果不存在则创建此路径。
Vue---在vue路由中配置组件的两种方式
前端与计算机相关知识的分享，博主的qq523235674
02-19 770
1.引入组件后直接在路由中配置（不推荐，组件属于静态引入，无论组件是否使用，组件都已经加载了，加重渲染性能） import login from '../views/login' const routes = [ { path: '/login', name: 'login', component: login ] 2.路由赖加载的方式（推荐，组件属于动态引入，组件需要时再加载组件） const routes = [ {
vue中路由跳转不计入history的操作
10-14
最后，文档中还提到了使用`<van-field>`组件的例子，这实际上是Vant UI组件库中的表单输入组件，虽然这个组件与路由跳转无直接关系，但它体现了在Vue项目中集成UI组件库的做法。在实际开发中，利用如Vant这样的组件...
vue中路由跳转和组件跳转有什么区别
07-10
当用户点击链接或者通过编程方式触发路由跳转时，Vue Router会根据配置的路由规则，加载对应的组件并更新URL路径。路由跳转通常用于实现页面级别的导航，例如从一个页面跳转到另一个页面。 2. 组件跳转是通过Vue...
Vue3中路由的引入和基本使用
weixin_49042147的博客
03-09 1893
Vue3中路由的安装引入和基本使用 本文采用setup语法糖
【Vue】判断项目的某个文件夹中是否有指定的图片
weixin_42342065的博客
12-26 790
【Vue】判断项目的某个文件夹中是否有指定的图片
【常用代码段】判断一个文件路径对应的文件夹是否存在，不存在则创建
HMTeen
06-26 338
【代码】【常用代码段】判断一个文件路径对应的文件夹是否存在，不存在则创建。
vue自带校验js文件路径源码
adsadadaddadasda的博客
06-10 742
webpack:///./node_modules/_async-validator@1.8.2@async-validator/es/rule/type.js?5ff6在这个路径下是vue再带校验源码，可以看源码对其校验规则进行一些了解以及使用
vue中使用router动态加载路由找不到文件
m0_74145101的博客
05-11 1383
该文章仅为个人踩坑记录，如有代码错误请提出，本人将积极改正。
判断文件是否存在
Zartillery的博客
12-28 2464
File f = new File("D:\\All"); //new一个f对象，输入要查找的文件 if (f.exists()) { //判断文件是否存在 System.out.println("exist"); //存在输出"exist" } else { System.out.println("not exist"); //不存在输出"not exist" }  ...
vue 判断文件是否存在_如何判断模板类中是否存在函数f ？
weixin_39890652的博客
12-10 1823
一个典型的stackoverflow风格的问题作为文章标题，以此避免挖空心思想名字的纠结。问题描述回到这个问题，常写模板的同学应该能心领神会需求的来源。举个简单例子，在三维数据处理中，经常会和空间点point打交道，point中会有很多种信息需要存储，比如空间坐标 x/y/z，比如法向信息 nx/ny/nz，比如颜色信息 R/G/B等，这些信息并非都是必须，在不同应用中会有不同的取舍。为了简单起见...
Vue-获取组件($root-$parent-$children-$refs)
qq_56973906的博客
09-08 2194
如果正在尝试使用$children来进行数据绑定，考虑使用一个数组配合v-for来生成子组件，并且使用Array作为真正的来源。和$root 类似，$parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。原理：再入口文件main.js中对Vue的原型设置一个属性并绑定vm对象,后面的子组件都能访问这个根节点。Vue子组件可以通过$root属性访问父组件实例的属性和方法。
vue 挂载 文件夹的所有组件
好单侠的博客
11-10 247
vue 挂载 文件夹的所有组件
vue路由守卫
weixin_46957313的博客
06-15 237
一、什么是路由守卫 导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。 二、全局守卫 router.beforeEach((to,from,next)=>{}) 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，nex
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

webmote

如果能帮到你，请支持下博主

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值