vue.js实现分页,vue嵌套路由实现分页,vue.js,分页前言 最近练习Vue，看到官方文档中的嵌套路由，不做不知道，实在是太坑了，网上资料demo少之又少，然后自己就做了一个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_51zixue.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
vue.js实现分页,vue嵌套路由实现分页,vue.js,分页
|
