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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
js 求时间差的实现代码
Apr 26 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
PHP插入排序实现代码
2013/04/04 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
看了就知道什么是JSON
2007/12/09 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
python实现三维拟合的方法
2018/12/29 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
大学生水果店创业计划书
2014/01/28 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
学生上课说话检讨书
2014/10/25 职场文书
开除员工通知
2015/04/22 职场文书
政协工作总结2015
2015/05/20 职场文书
校园广播站开场白
2015/06/01 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
七年级话题作文之执着
2019/11/19 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
Pytorch DataLoader shuffle验证方式
2021/06/02 Python