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 getElementsByClassName函数
Apr 01 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
微信小程序实现日历签到
Sep 21 Javascript
vue如何清除浏览器历史栈
May 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
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php创建sprite
2014/02/11 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
js中prototype用法详细介绍
2013/11/14 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python编程argparse入门浅析
2018/02/07 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
小学教学随笔感言
2014/02/26 职场文书
个人评语大全
2014/05/04 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书