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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
php浏览历史记录的方法
2015/03/10 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js jquery数组介绍
2012/07/15 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
理解javascript模块化
2016/03/28 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
解决Django连接db遇到的问题
2019/08/29 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
python requests库的使用
2021/01/06 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
后勤岗位职责
2013/11/26 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
培训心得体会怎么写
2016/01/25 职场文书