vue-router改写一下导入路由

最新推荐文章于 2024-10-30 20:30:00 发布
原创 最新推荐文章于 2024-10-30 20:30:00 发布 · 587 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#路由 #import #require #vue #vue-router

本文介绍了一种在Vue项目中简化组件导入的方法，通过使用自定义函数getImport，可以避免每次手动导入组件路径的繁琐，提高开发效率。文章深入探讨了require和import的区别，并展示了如何在实际项目中应用此技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

const getImport = (file, path) => require(`@/${path || 'views'}/` + file + '.vue').default
{path: '/getAddressList', name: 'getAddressList', component: getImport('configCenter/formList')},
{path: '/getAddressDetail', name: 'getAddressDetail', component: getImport('configCenter/getAddress')}

这么写单纯的是为了不用每次都import那个路径，原理就看看require和import的区别就是了，记住看.default

vue-router实现原理、理论知识和实践详情
大模型大数据攻城狮的专栏
07-04 747
这一章咱们将深入Vue Router的源码（基于4.x版本），剖析它的核心实现逻辑，从路由初始化到导航流程，再到组件渲染。别担心，我会用通俗的语言带你啃这块硬骨头，配上代码片段和注释，让你既能看懂源码，又能把思路用到自己的项目里！不过，它实现起来比Hash模式复杂点，咱们来一探究竟。比如，路由规则/user/:id会被转成正则^/user/([^/]+)，其中[^/]+匹配任意非斜杠字符，提取为参数id。Vue Router的核心任务是监听URL变化，然后根据配置的路由规则，动态渲染对应的组件。
Vue-Router的使用详解
nanxing的博客
07-07 1202
Vue-Router的使用详解认识路由渲染 & 路由URL的hash & HTML5的History使用 vue-router基本使用其他小补充router-link属性路由懒加载 (常用)动态路由基本使用获取动态路由的值匹配多个参数NotFound路由的嵌套代码实现路由跳转query方式的参数发送接收router-link的补充router-link的插槽router-view的补充router-view的插槽动态添加路由路由守卫 认识路由 渲染 & 路由 后端渲染 & 前
重写VueRouter的push|replace
qq_60163657的博客
06-23 556
重写VueRouter的push|replace
VueRouter导入
withkai44的博客
06-05 2516
​ --生成随机id 使用 路由 1-1 安装依赖 1-2 引入 router/index.js 1-3 在main.js中使用 1-4 App.vue 全局过滤器 在main.js中挂载在Vue原型上 element-ui 安装依赖 main.js 全局组件 Vuc-cli中的视配 1-1 安装依赖 1-2 配置文件 新建postcss.config.js 1-3 main.js 导入lib-flexible 1-4 public/index.html 将此行注释，关闭视口 1-5 在pc
vue --- > vue-router(项目模式的导入)
栗子好好吃的博客
09-16 711
main.js // main.js // 1.1 导入路由的包 import VueRouter from 'vue-router' // 1.2 安装路由 Vue.use(VuerRouter) // 1.3 导入自己的router.js模块 import router from './router.js' // 1.4 挂载router对象在vm实例上 const vm = new ...
vue定义嵌套路由
xieyuleisss的博客
09-11 536
在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？ 其实很简单，只需要我们在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 下面为示例代码： index.html，只有一个路由出口 <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </di
Vue + Webpack 将路由文件分拆为多个文件分别管理简明教程
FungLeo's Blog
07-12 9101
Vue + Webpack 将路由文件分拆为多个文件分别管理简明教程 近日，有网友留言，询问，如何将 vue 的路由分拆为多个文件进行管理。这当然是可以的。今天我就来写一个简单的教程，希望对大家有所帮助。 事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。 当我们用 vue-cli 工具，创建一个新的 vue 项目时，就已经...
vue-router实现webApp切换页面动画效果代码
08-30
vue-router 实现 webApp 切换页面动画效果代码 本篇文章主要介绍了使用 Vue ...使用 Vue Router 实现 webApp 页面切换动画效果需要记录页面状态、监听路由变化、使用 transition 元素执行动画效果，并设置路由规则。
Vue.js2.0基础：vue-router
青红造了个大白之成长记
05-09 909
对于SPA( single pageapplication单页面应用)，尤其是做移动端的网页应用，由于使用<a/>标签实现页面的切换和跳转，会有一定的加载时间消耗，经常遇到这样的画面： 网速慢一点的时候，就一直在加载，严重影响产品的用户体验，这也是（html5）移动端网页应用在使用流畅度干不过原生app的地方之一。 所以常用的做法将网页应用做成一个SPA单页面应用，用视...
VUE-插件 vue-router vuex
xjz19930219的博客
06-16 237
什么是前端路由 什么是路由？ 通俗的讲就是网址。 专业一点，就是每次GET或者POST等请求在服务器端有一个专门的正则配置列表，然后匹配到具体一条路径后， 分发到不同的Controller，进行各种操作，最终将html或者数据返回给前端，这就完成了一次IO。 目前绝大多数网站都是这种后端路由，也就是多页面的，这样的好处有很多。 比如页面可以在服务器端渲染好了直接放回给浏览器，不用等待前端加载js和...
vue2.x搭建saas项目系列之三：router配置相关
ur home
01-25 700
此篇幅主要介绍、我是如何做路由的配置和路由常量的抽离，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代，路由版本目前为v1.0.0 路由目录结构如图 ├──router # 路由相关所有文件 ││──modules # 以一级菜单命名的模块文件 ││──_import_xxxx.ts # 开发、生产环境的配置 ││──common.ts ...
Vue2路由的使用 vue-router
m0_62508027的博客
05-12 5607
对vue2中vue-router的使用，简单总结
webstorm创建vue项目（035）
weixin_31707323的博客
05-24 1974
webstorm创建vue项目 一、版本 webstorm版本 2021.1.1 node 版本 14.16.0 vue.cli 版本 4.5.13 二、新建 1. create 选择自定义配置选项。（按上、下健切换选项，按空格键选择选项，按i键反选) 选择安装插件,说明。 () Babel // 是否使用babel做转义 ( ) TypeScript // 是否使用class风格的组件语法 ( ) Progressive Web App (PWA) Support // 支持PWA () Rout
Vue-Router使用
weixin_44728473的博客
06-24 195
Vue-Router使用 1. 安装 vue项目的package.json文件会自动增加如下依赖： 2. 添加路由 在src目录下新建router/index.ts 3. 在main.ts文件加入路由 4.在App.vue 添加导航，并使用router-view
15. vue引入路由配置
快乐的大大大飞猪
09-17 820
在Vue中，我们可以通过vue-router路由管理页面之间的关系Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
Vue引入路由
weixin_73861049的博客
08-28 489
5、使用标签渲染路由地址所对应的页面组件；在main.js中使用路由。1、用npm命令安装路由。
在vue中 引入路由
weixin_55761900的博客
05-17 625
3.引入路由到项目（在main.js）指定路由显示入口(在app.vue中)2.配置独立的路由文件。
2、idea-vue项目导入ElementUI、Router（路由）
qq_45716444的博客
05-14 4408
文章目录一、导入ElementUI1、点击下图的红箭头位置，执行 npm install element-ui2、在main.js中配置具体配置3、在App.vue中使用elementui组件参考代码导入Router(路由)点击下图的红箭头位置，执行npm install vue-router在main中配置在src目录下创建router 一、导入ElementUI 1、点击下图的红箭头位置，执行 npm install element-ui 2、在main.js中配置 具体配置 import Eleme
VueRouter引入步骤
最新发布
DngYT的博客
10-30 754
在index.js文件中，导入Vue和VueRouter，并使用Vue.use(VueRouter)来安装VueRouter插件（对于Vue 3，需要使用createRouter和createWebHistory或createMemoryHistory来创建路由实例）。定义一个路由配置对象，该对象包含一个routes数组，数组中的每个元素都是一个路由规则对象，包含path（路径）和component（组件）等属性。创建一个新的Vue实例，并通过router选项将VueRouter实例挂载到Vue实例上。
vue2.0引入vue-router
04-21
，vue3.0又如何处理路由？请回答。 Vue3.0引入了新的路由管理工具Vue Router 4，与Vue Router 3相比，它最大的变化是使用了Composition API来设计路由器。Composition API是Vue3.0中新增的API，用于解决模板代码臃肿、重用困难等问题。VueRouter 4利用Composition API改写了许多API和钩子函数，使得路由管理更加方便和灵活。同时，Vue Router 4也在性能和可维护性上进行了优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值