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 相关文章推荐
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
基于vue配置axios的方法步骤
Nov 09 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
python处理cookie详解
2014/02/07 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
实例详解Python模块decimal
2019/06/26 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
python适合做数据挖掘吗
2020/06/16 Python
互动出版网:专业书籍
2017/03/21 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
护理自荐信范文
2013/10/05 职场文书
小学生学习感言
2014/03/10 职场文书
施工安全责任书范本
2014/07/24 职场文书
给老师的感谢信
2015/01/20 职场文书
飞屋环游记观后感
2015/06/08 职场文书