ly-tab第三方组件使用记录

应用场景，然后每个模块下面又有子模块，可左右拖动
下载安装：npm i ly-tab -S
main.js全局引入：import LyTab from ‘ly-tab’
注册使用：Vue.use(LyTab)

具体代码：

<template><div class="home"><!-- 全局引用的ly-tab在这里调用这个组件 --><!-- 把设置好的组件参数与数据进行传入 --><!-- @change="handleChange"给每个元素添加上点击事件 --><ly-tabv-model="selectedId":items="items":options="options"@change="handleChange"/><!-- 所有的二级路由组件统一在router/index.js里注册，这里只需要写上router-view就可以进行展示了 --><!-- 在router/index.js里注册的组件统一在router-view里面进行展示 --><router-view/></div>
</template><script>
// 配置玩了所有的二级路由，但是ly-tab这个组件怎么去绑定路由跳转呢     发起问题
// 解决方法       @change="handleChange
export default {name:'Home',data() {return {selectedId:0,   //代表选中的id，为0，一开始进入页面就显示数组的第0位啊items:[{label: '热门'},{label: '服饰'},{label: '鞋包'},{label: '母婴'},{label: '百货'},{label: '食品'},{label: '内衣'},{label: '男装'},{label: '电器'}],                        //所要展示的东西，但要以对象的形式传入options:{activeColor:"#008792"       //设置选中颜色},// 二级路由路径subRouteUrl: ['/home/hot', '/home/dress', '/home/box', '/home/mbaby', '/home/general', '/home/food', '/home/shirt', '/home/man', '/home/ele']}},methods:{// ly-tab组件的绑定事件函数handleChange(item,index){// console.log(item,index)        index为一个下标，通过定义的数组，取出对应下标的路由地址进行跳转// console.log(this.$router)//跳转到指定的路径this.$router.replace()// this.$router.replace('/me')        例如  这样就可以跳转到/me页面，就是个人中心页面this.$router.replace(this.subRouteUrl[index])console.log(this.$route);}},created() {// console.log(this.$router)},
};
</script><style scoped lang="stylus" ref="stylesheet/stylus">
.homebackground #009ad6width 100%height 100%</style>

index.js配置路由和以往也是不太一样的方法，顺便摘录一下

export default  new VueRouter({//  3.1配置一级路由routes: [{path:'/home',component:Home,//  配置home里面的二级路由children: [//  二级路由这样写不用加/斜杠// 热门版块{path: 'hot', component: Hot},// 服饰版块{path: 'dress', component: Dress},// 鞋包版块{path: 'box', component: Box},// 母婴版块{path: 'mbaby', component: Mbaby},// 百货版块{path: 'general', component: General},// 食品版块{path: 'food', component: Food},// 内衣版块{path: 'shirt', component: Shirt},// 男装版块{path: 'man', component: Man},// 电器版块{path: 'ele', component: Ele},// 用户访问/home，就默认展示/home/hot{path: '/home',redirect: '/home/hot'}]},{path:'/chat',component:Chat},{path:'/me',component:Me},{path:'/search',component:Search},{path:'/recommend',component:Recommend},{path:'/',redirect:'/home'}]
})

ly-tab第三方组件使用记录相关推荐

iOS可能用到的开源库和第三方组件
1.通过CocoaPods安装 [AFNetworking](https://github.com/AFNetworking/AFNetworking) 网络请求组件[FMDB](https://gi ...
Gwt第三方组件、框架介绍
虽然是晚上,但是手头还是有很多事情要做,但是杂乱无章,自己也没有特别的计划,于是信步闲逛到javaeye上随手涂鸦.见谅见谅! 介绍一下我接触过的Gwt第三方组件.框架及项目 1． Mygwt 曾经的 ...
iOS 项目中用到的一些开源库和第三方组件
iOS 项目中用到的一些 iOS 开源库和第三方组件分享一下我目前所在公司 iOS 项目中用到的一些 iOS 开源库和第三方组件, 感谢开源, 减少了我们的劳动力, 节约了我们大量的时间, 让我们有 ...
React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
android多线程下载原理,安卓多线程断点续传下载功能（靠谱第三方组件，原理demo）...
一,原生的DownloadManager 从Android 2.3(API level 9)开始,Android以Service的方式提供了全局的DownloadManager来系统级地优化处理长时间 ...
如何在Eclipse中查看Android源码或者第三方组件包源码
文章出处:http://blog.csdn.net/cjjky/article/details/6535426 在学习过程中如果经常阅读源码,理解程度会比较深,学习效率也会比较高,那么如何方便快捷的阅 ...
android studio 导入第三方库的记录
android studio 导入第三方库的记录.jar包和库一.jar包 1.jar包的话很简单,首先换成project模式,将你要用的jar包复制到lib下面.如图 2.然后右键选择Add ...
Delphi第三方组件安装DCU.PAS.DPK.BPL.ActiveX控件
不是由BORLAND提供的组件叫第三方组件: 安装方法: 南山古桃(nsgtao)首先提醒一下:最好把要安装的文件先复制到Delphi安装目录的Lib目录下再执行下面的操作! 就目前常见的各种形式的组 ...
导入第三方组件_大型 web 应用公共组件架构是如何来的？
来源:腾讯AlloyTeam https://mp.weixin.qq.com/s/gVUJRF_nLHOT_iXDXQ8F-w 腾讯文档公共组件历史包袱 1. 架构问题--开发层面腾讯文档管理的公 ...

ly-tab第三方组件使用记录

ly-tab第三方组件使用记录相关推荐

最新文章

热门文章