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 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
jquery实现用户打分评分特效
May 28 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
AngularJs分页插件使用详解
2018/06/30 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
php使用递归与迭代实现快速排序示例
2014/01/23 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
python 产生token及token验证的方法
2018/12/26 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
python里反向传播算法详解
2020/11/22 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
2014年流动人口工作总结
2014/11/26 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android