vue-router改写一下导入路由

最新推荐文章于 2022-07-01 12:00:27 发布
最新推荐文章于 2022-07-01 12:00:27 发布
阅读量587 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 随笔&笔记 文章标签： 路由 import require vue vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33559093/article/details/85713628
本文介绍了一种在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 1205
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 712
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 ...
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
vue 替换路由地址参数（动态修改路由参数）
summer_my_sunshine的博客
04-26 1万+
在项目中，比如进入我的订单页面，订单页面有不同的几个菜单，如：待付款、待发货、待收货、待收货等； 我们想要实现从不同的菜单点击进入订单详情页，再返回订单列表的时候，还是定位在之前对应的菜单，这时候就需要用到替换路由参数。 我们可以在执行点击菜单的时候，就替换掉路由地址的参数，以便于之后返回该订单列表的时候，还是定位在对应的菜单项。 替换路由地址参数，代码执行如下： this.$router.replace({ name: 'Orders', params: { tabId: index } })
vue第五章习题
qq_46556714的博客
11-19 9422
课后习题 一、填空题 1.在项目中可以通过 npm命令 npm instal vue - router 安装路由 vue - routero 2.使用路由对象获取当前激活的路由的状态信息。 3通过一个名称来标识一个路由的方式叫作命名路由 4在业务逻辑代码中实现导航跳转的方式称为编程式导航 5,单页面应用主要通过 URL 中的 hash （#号）实现不同页面之间的切换。 二、判断题 1.后端路由通过用户请求的 URL 导航到具体的 html 页面。 ✔ 2.开发环境下,使用 import VueRoute
点进来，三分钟告诉你VUE路由怎么写
L1ke_one的博客
03-04 3709
一、带参数的动态路由匹配 1.路径参数 在 Vue Router 中，在路径中使用一个动态字段来实现，称之为路径参数。路径参数用冒号:表示。当一个路由被匹配时，它的params的值将在每个组件中以this.$route.params的形式暴露出来。 可以在同一个路由中设置有多个路径参数，它们会映射到$route.params上的相应字段。 2.响应路由参数的变化 使用带有参数的路由时，相同的组件实例将被重复使用 要对同一个组件中参数的变化做出响应的话，可以简单地 watc...
vue 路由（router）导入两种方式
小心仔的博客
06-21 4079
vue 路由（router）导入两种方式
vue-router 导入页面方法
艾小逗
10-10 2587
vue-router 导入页面方法 无需在 router/index.js 文件中顶部 import 所有页面，方便简洁。 工具类： import.js /* import utils */ export default function _import (file, viewPath = 'views') { if (process.env.NODE_ENV === 'developmen...
vue-router的两种模式区别以及使用注意事项
热门推荐
王永存
08-18 4万+
Vue Router 是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认 hash 模式，还有一种是history模式。 hash模式 hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。 window.onhashchange = f...
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、付费专栏及课程。

余额充值