vue-router拆分成子模块引入，页面跳转时vant-dialog报错

最新推荐文章于 2023-10-19 22:05:04 发布
最新推荐文章于 2023-10-19 22:05:04 发布
阅读量366 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niliudeyu111111/article/details/112848149
版权

vue-router子模块引入，路由跳转vant-dialog报错**

问题描述

项目中的所有路由文件都放在router下的index.js文件中，臃肿又不利于读取，于是把index.js拆分成子模块引入。
拆分成子模块
在这里插入图片描述

按需引入
在这里插入图片描述

完成后发现页面跳转时报错，打印出来发现是dialog没有正确引入
在这里插入图片描述
当前在需要的页面直接按需引入在这里插入图片描述

解决办法

直接在main.js中全局引入即可
在这里插入图片描述

疑问

问题解决了，还有一个疑问，为什么把所有路由都写在index.js页面，用import引入页面，vant-dialog按需引入不会报错，把路由模块化以后就会报错了呢？有知道的大神请帮忙解答，万分感谢！！！

晓幸运2019
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue页面传值总结（列表详情两种方式el-dialog弹窗 新页面）以及query Parmas $router $router区别
weixin_45170083的博客
05-08 4380
一.说起Vue页面传值，大家都会想到的是路由的三种传值方式， 二.我们看列表详情也有两种方式，一种是通过弹窗的形式el-dialog，一种是通过路由跳转新页面的方式， 三.记住新页面详情，往往需要我们先把我们点击所属列表的ID传过去，再在新页面调用接口（附带我们得到传来的ID作为参数）然后渲染到我们本条数据的详情 四.由下面的router和router 和router和rouer 说一下两种区别 ...
vant组件Dialog弹窗在路由改变的时候不生效问题
nosmokepig的博客
06-09 1142
dialog弹窗失效
Vant和ElementPlus在vue的hash模式的路由下路由离开拦截使用Dialog和MessageBox失效
小张与BUG
10-19 660
Vant和ElementPlus在vue的hash模式的路由下路由离开拦截使用Dialog和MessageBox失效
Vue3 router使用不了 解决方法
qq_43071951的博客
07-20 411
Vue3 router跳转页面
Vue路由分模块 与 子路由嵌套,
技术前端，忠于热爱 @0.活在风浪里
01-07 1481
路由模块化 创建文件路径如下： 路由模块化思路 /** * * 还是导入导出那一套,首先新建语义化的文件,在js文件中导出export default { // XXX } * 导出多个路由模块要加[]，例如export default [{},{}], * 在router.js引入，写在路由里，需要...引入的名字 * */ 1、新建文件后 内容如下方 新建的sort.js文件 /** * 多个分模块路由。 */ export default [{ // 如果多.
vue 路由模块化
YWW_ABC的博客
10-09 999
为什么要将路由进行模块化？路由模块化有什么好处？ 假设你写的项目就有几个页面那就没有必要用到路由模块化，要是有N多个页面我们就需要再router.js里面写N多个路由，此时我们就要用到路由模块化来对这些路由进行分类管理，以便我们后期对其进行管理，这样一来我们的代码也不会看上去那么的繁琐
vue-router跳转时打开新页面的两种方法
12-08
记录一下在vue项目中如何实现跳转到一个新页面（一个比较简单又比较基础的问题了），有两个方法： 1、<vue>标签实现新窗口打开 官方文档中说 v-link 指令被 <router> 组件指令替代，且 <router> 不支持 target=”_...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
Vue-router 报错NavigationDuplicated的解决方法
10-15
主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue.js实战之利用vue-router实现跳转页面
11-30
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html ...
vant Dialog组件调用的坑
xinTianou123的博客
02-22 6918
vant Dialog 组件调用 如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。 <van-dialog v-model="show" title="标题" show-cancel-button> <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> </van-dialog> export default { data() { return { show: false
浅谈vue 项目router (路由)+ views（界面）配置方案
Bloxed_shangyc的博客
09-09 6626
前言：在公司的项目里，一般的dome 的router配置方案无法满足项目的要求，需要一套属于项目的路由配置。个人理解：router配置界面就像遛宠物，router 就是宠物链，views就是宠物。 界面切换就是路由切换。 import 导入需要配置的界面组件，通过router输出，通过某一菜单列把router循环渲染，点击不同菜单router切换不同组件。
vue路由划分模块并自动引入
qq_43610311的博客
02-17 656
router路由划分模块并自动引入
1、弹窗里面嵌套路由，项目总结-vue-insurance-web-官网（yezhuwuyou）
weixin_39897287的博客
04-07 898
1、我的订单列表-申请修改流程 这个流程是个谭传，里面的内容有很多步骤，是靠路由实现的 <el-dialog class="correction" :visible.sync="correctionDialogVisible" :before-close="handleClose" :close-on-clic...
Vue路由模块化的实现方法
null1126的博客
08-24 926
分享一个Vue路由模块化方法，简单实用，好用到飞起路由模块化1. router/index.js2. router/home.js 无子路由3. router/order.js 有子路由4.main.js5.App.vue 路由模块化 1. router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import home from './home' //路由模块 import order from './order
vue路由分开在好几个页面分模块来写
肖肖肖丽珠的博客
07-12 5823
问题原因是变态的项目经理说路由文件如果很长很长。全在一个文件里面放的不就很大不好找吗？他希望我把路由放在好几个页面里面。我查了好久都没有找到vue的路由分开在好几个页面来写的尝试了一下。没报错但是页面空白。最后在一个大神下面留言请教，没想到他竟然写了一篇博客给我解答链接地址在这里https://blog.csdn.net/FungLeo/article/details/81014184...
vue项目中使用webpack多页面开发和代码分割chunk
希文Gershwin
11-04 6712
webpack的一些基本解释 webpack是一个打包工具: 什么是打包呢? 打包就是把源代码经过一系列处理输出为最终代码的过程,webpack官网封面就解释的很好 什么是chunk（1） chunk就是打包成的一个个的块 我们以前用jquery之类的开发的时候,我们的js，css等文件都是单独引入的，比如下面的代码 <link rel="stylesheet" href="./bootstrap.css"> <link rel="stylesheet" href="./boot
【vue-router + eventbus】在页面跳转时使用eventbus传递数据
最新发布
11-02
在Vue项目中，我们可以使用Vue的事件总线EventBus来实现组件之间的通信。在使用Vue-Router进行页面跳转时，我们可以使用EventBus来传递数据。具体实现方法如下： 1.在项目中创建一个EventBus.js文件，用于创建一个Vue实例作为事件总线： ``` import Vue from 'vue' export default new Vue(); ``` 2.在A页面中，使用EventBus的$emit方法触发事件，并传递数据： ``` import bus from "EventBus.js" search(val) { bus.$emit("fuzzySearch", val); this.$router.push("result"); } ``` 3.在B页面中，使用EventBus的$on方法监听事件，并获取传递的数据： ``` import bus from "EventBus.js" mounted() { bus.$on("fuzzySearch", data => { console.log(data); }); } ``` 需要注意的是，$on事件一定要在$emit之前注册，否则可能会出现监听不到事件的情况。同时，在组件销毁前，需要使用$off方法取消事件监听，以免出现内存泄漏的问题。 相关问题： 1. 在Vue项目中，还有哪些方法可以实现组件之间的通信？ 2. 在使用EventBus时，如何避免出现内存泄漏的问题？ 3. Vue-Router的导航守卫有哪些？它们分别在什么时候触发？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值