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之浮动窗口实现代码(两种方法)
Sep 08 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
jquery replace方法去空格
May 08 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
ajax 的post方法实例(带循环)
2011/07/04 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python入门篇之对象类型
2014/10/17 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Django异步任务线程池实现原理
2019/12/17 Python
Django websocket原理及功能实现代码
2020/11/14 Python
python 发送get请求接口详解
2020/11/17 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
建筑个人求职信范文
2014/01/25 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
社会实践活动总结
2015/02/05 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
mysql的单列多值存储实例详解
2022/04/05 MySQL