vue2.0嵌套路由实现豆瓣电影分页功能(附demo)


Posted in Javascript onMarch 13, 2017

前言

最近练习Vue,看到官方文档中的嵌套路由,不做不知道,实在是太坑了,网上资料demo少之又少,然后自己就做了一个demo,用了vue2.0嵌套路由实现豆瓣电影分页功能,供大家学习学习,写得不好望见谅。

demo截图:

vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

Demo简单介绍

主路由:Top250(charts),正在热映(hot),即将上映(ing),新片榜(newmovie)

const router = new VueRouter({
  routes: [
    {
     path: '/',  //设置默认路由为Top250
     component: charts
    },
    {
     path: '/charts', //Top250
     component: charts
    },
    {
     path: '/hot', 
     component: hot
    },
    {
     path: '/ing',
     component: ing
    },
    {
     path: '/newmovie',
     component: newmovie
    },
  ]
 }

在top250(charts)上添加了分页功能作为子路由,在配置上添加:

{
 path: '/charts/:id', //子路由
 component: charts,
 children: [
  {path: '1', component: moviecontent}, 
  {path: '2', component: moviecontent2},
  {path: '3', component: moviecontent3}
  ]
}

在charts组件上添加入口:

<router-link to="/charts/1">1</router-link>
<router-link to="/charts/2">2</router-link>
<router-link to="/charts/3">3</router-link>

在charts组件上添加出口:

<router-view></router-view>

子路由如何跳转同一组件时数据实现更新?

同样,在top250(charts)上添加了分页功能作为子路由,但指向同一组件:

{
 path: '/charts/:id', //子路由
 component: charts,
 children: [
  {path: '1', component: moviecontent2}, // 同一组件
  {path: '2', component: moviecontent2}, // 同一组件
  {path: '3', component: moviecontent2} // 同一组件
  ]
}

画重点:

因为路由切换同一组件时,实例已经在第一次进入路由时创建了,之后切换路由不会被创建了,所以只能调用一次created,因此要使用$route监听getData方法,当路由切换的时候,调用getData方法,重新获取数据。

created: function () {
    //第一次进入路由时数据的更新
    this.$http.jsonp()
},
watch: {
 '$route': 'getData' //切换路由,调用getData方法
},
methods: {
 getData: function () {
    //路由切换,重新请求数据
    this.$http.jsonp()
 }
}

数据来自豆瓣电影API。

代码写得好烂,凑合着看吧,反正子路由还是成功的啊!

本demo地址:doubandemo_3water.rar

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

Javascript 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
JS实现的几个常用算法
Nov 12 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
微信小程序实现日历功能
Nov 27 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 #Javascript
深入理解Node.js中的进程管理
Mar 13 #Javascript
jQuery简易时光轴实现方法示例
Mar 13 #Javascript
JavaScript评论点赞功能的实现方法
Mar 13 #Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 #Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 #Javascript
JS实现直接运行html代码的方法
Mar 13 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
解析yii数据库的增删查改
2013/06/20 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PDO::setAttribute讲解
2019/01/29 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
js的对象与函数详解
2019/01/21 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
大学学年自我鉴定
2013/10/28 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
写给老师的保证书
2015/05/09 职场文书
医院员工辞职信范文
2015/05/12 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
MySQL 查询速度慢的原因
2021/05/25 MySQL