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参数的小问题
Mar 02 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
javascript相关事件的几个概念
May 21 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
vue刷新和tab切换实例
Feb 11 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 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
PHP读取xml方法介绍
2013/01/12 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
动态控制Table的js代码
2007/03/07 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
js date 格式化
2017/02/15 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python中常用的内置方法
2019/01/28 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
PageFactory设计模式基于python实现
2020/04/14 Python
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
教师师德承诺书
2014/03/26 职场文书
中专生自荐信
2014/06/25 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
个人租房协议书样本
2014/10/01 职场文书
党校个人总结
2015/03/04 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL