vue路由分开在好几个页面分模块来写

最新推荐文章于 2024-09-11 17:04:07 发布
最新推荐文章于 2024-09-11 17:04:07 发布
阅读量5.8k 收藏
点赞数
分类专栏： vue

问题原因是变态的项目经理说路由文件如果很长很长。全在一个文件里面放的不就很大不好找吗？他希望我把路由放在好几个页面里面。

我查了好久都没有找到vue的路由分开在好几个页面来写的尝试了一下。没报错但是页面空白。

最后在一个大神下面留言请教，没想到他竟然写了一篇博客给我解答

链接地址在这里

https://blog.csdn.net/FungLeo/article/details/81014184

肖肖肖丽珠
关注
专栏目录
Vue路由分文件拆分管理
weixin_39407291的博客
08-20 268
这段时间做的商城系统，相对也是比较复杂的，路由比较多，直接都写在路由入口文件index.js中，后期维护起来头疼，我们可以根据不同的模块来创建不同的路由子文件，在自文件中维护各个模块的路由，引入到index.js中就可以了。 路由子文件sellerRoute.js const sellerRoute = [ { path: '/seller/lanchGoods', name: 'LanchGoods', component: () => { return import('@/pa
vue路由分文件拆分管理
qq_35430000的博客
05-30 3262
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。但倘若你开发一些功能点较多的商城项目，路由可以会有一百甚至几百个，那么此时将路由文件进行拆分是很有必要的。不然，你看着index.js文件中一大长串串串串串串的路由，也是很糟糕的。 首先我们在r...
Vue路由：Vue router
最新发布
m0_61619549的博客
09-11 2184
Vue Router 是 Vue.js 的官方路由解决方案。它与 Vue.js 核心深度集成，让用 Vue 构建单页应用变得轻而易举。通过它，你可以轻松地管理应用中的页面跳转、路由守卫（如登录守卫），懒加载等功能。（注意：以下介绍以 Vue Router 4 为基础，相比于Vue Router 3 引入了一些新的特性和改进）Vue Router | Vue.js 的官方路由。
Vue 2.x框架完善（二）—— vue路由按模块配置
李小城的博客
02-26 8498
1. 写在前面 关于vue框架API，使用，全家桶等有很多博客可供参考，写的很详细很好。这里写一些小编自己的经验，和其他博客不一样的，仅供参考。 1. vue 官网，你可以去此查看官方文档和API 2. 关于 vue 的博客专栏 3. 前端框架 Vue 初体验 @JesusAllen30 关于 vue-router 的相关文档： 1. vue-router 官方文档 2. 网上很多优...
vue路由文件拆分管理
Sunny_lxm的博客
03-03 1296
vue路由文件拆分管理
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。但倘若你开发一些功能点较多的商城项目，路由可以会有一百甚至几百个，那么此时将路由文件进行拆分是很有必要的。不然，你看着index.js文件中一大长串串串串串串的路由，也是很糟糕的。 首先我们在router文件夹中创建一个index.js作为路由的入口文件，然后新建一个modules文件夹，里面存放各个模块的路由文件。例如这里储存了一个vote.js投票模块的路由文件和一个公共模块的路由文件。下面直
webpack 按需打包vue项目，根据不同业务模块打包成不同包
学而时习之，不亦说乎。
05-19 6380
需求 开发的项目需要每个页面打包成一个项目，给第三方平台上线 实现原理 把router.js分成好几个不同的路由。 问题： 入口main.js引用了router.js 也要每次都切换router.js来打包，这样main.js的代码并不好维护。 解决方案 1.我们可以同样把main.js 拆成 main_page1.js 和 main_page2.js,注意不同的main.js里面引用不同的router.js，然后使用webpack的特性mode来读取不同的main.js 2.首先在package.json
vue3多页面运行与打包
qq_25856179的博客
12-03 1045
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
a标签传值到另一个页面_vue通信、传值的多种方式（详细）
weixin_39623620的博客
11-21 1830
后台看见有人需要了解vue传值，今天就来了解下一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)this.$router.push({ path: '/conponentsB', query: { orderId: 123 } })②在B组件中获取A组件传递过来的参数this.$route.query.or...
vue关闭当前页面 跳转_vue常见面试题
weixin_39668965的博客
11-19 5487
1.vue优点？ 答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有...
html多个子页显示在一个页面,html多个html页面嵌套在一起
weixin_39882394的博客
06-03 6298
vue为什么要用vue传统的网页形式是浏览器脚本语言js连接了各种各样的Html，css，但缺乏正规的组织形式，比如在页面元素非常多，结构很庞大的网页中，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，那么要对它们进行处理会十分的费劲，并且如果其中有几个结构之间存在藕断丝连的关系，那么会导致代码上出现更大的问题，比如juqery中使用的$('#xxx').parent().par...
vue分文件开发同一个页面
08-16
开发中有时候一个页面在一个.vue文件中写会造成页面冗余，代码难以维护，这时候就需要考虑将页面不同的子页面（如：弹窗等分离到不同的文件中）。 示例：transpond.vue为子页面，logisticsGroup.vue为父页面。 注：包括父子页面之间传值等，参考页面时注意其他参数是否一并赋值了。
Vue2:标签页一个页面拆分成俩个选项卡
qq_45061461的博客
04-17 535
el-tabs 中的v-model 的值，对应着 el-tab-pane中的:name属性 就会选中该标签高亮提示。1.路由配置文件 router.js 配置路由信息。2.配置路由前置守卫(获取页面的路由信息)4.Tabs标签页组件。
vue2主体页面进行拆分
5年编程经验的老猿。
04-28 880
在Vue.js 2中，将主体页面进行拆分是一种常见的做法，它有助于提高代码的可维护性和可读性。页面拆分通常涉及以下几个步骤：
vue：如果.vue文件内容过多，我们可以这样拆分
好幸运
01-09 1272
二、那如果JS的内容太多呢？一、标签内容太多，我们可以用组件的方式拆分。逻辑拆分，相互调用不受组件影响。
vue多个路由共用一个页面问题
热门推荐
wang839305939的博客
08-31 2万+
在使用vue开发时，如何处理多个路由共用一个页面的问题
【vue】将页面拆分为index+组件
qq_39504802的博客
01-31 920
也没必要非要拆成组件，只要东西放在一个里面能跑就行
【vue开发技巧】路由太多的时候，怎么分类按照文件夹引入路由
web前端开发大全
03-26 1696
当路由太多的时候，导致整个页面非常大。在这个时候，可以通过把路由分类，然后使用require.context引入文件夹下所有的路由。 在router文件夹下创建：index.routes.js 和login.routes.js 在index.js中 代码如下： import Vue from 'vue' import VueRouter from 'vue-router' i...
基于Ant Design vue框架之二 修改页面细细拆分
weixin_43967890的博客
05-29 988
我们还是老规矩，先上效果图吧~~ 需要看整个页面的小盆友可以点下面这个路径哈~~ 页面路径：总页面展示 继续上干货吧~翠花，上代码~~ 继续走修改的画面： <a-modal title="用户信息修改页面" :width="640" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" > <a
Vue路由模块化配置实战解析
例如，可以在`index.js`中设置全局的守卫，也可以在每个模块路由文件中设置局部守卫，实现权限控制、错误处理等功能。 总结： Vue路由的模块化配置是大型项目中必不可少的实践，它使得路由管理更加清晰、易于维护。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值