Vue-router 类似Vuex实现组件化开发的示例


Posted in Javascript onSeptember 15, 2017

本文介绍了Vue-router 类似Vuex实现组件化开发的示例,分享给大家,具体如下:

随着项目越来越大,把所有route写在一个文件里就显得杂乱。

#单个组件路由
import a from '../components/a'
export default {
 path: '/a',
 name: 'a',
 component: a
}
import arouter from 'xxx'
export default new Router({
 routes: [
   arouter
 ]
})

#多个组件路由
import a from '../components/a'
import b from '../components/b'
export default [{
 path: '/a',
 name: 'a',
 component: a
}, {
 path: '/b',
 name: 'b',
 component: b
}]
#arouter.js
export default new Router({
 routes: [
  ...arouter//扩展运算符
 ]
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery remove方法应用详解
Nov 22 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
Vue实现简单的跑马灯
May 25 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 #Javascript
Vue渲染函数详解
Sep 15 #Javascript
JavaScript中如何判断一个值的类型
Sep 15 #Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 #Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 #Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 #Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 #Javascript
You might like
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
Js+XML 操作
2006/09/20 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Python3 log10()函数简单用法
2019/02/19 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
对python中的装包与解包实例详解
2019/08/24 Python
python打开使用的方法
2019/09/30 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
大学生入党思想汇报
2014/01/14 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
2015年护士节活动总结
2015/02/10 职场文书
社区端午节活动总结
2015/02/11 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python