源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

  • 时间:2021-12-08 11:53 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
前言 最近练习Vue,看到官方文档中的[url=https://router.vuejs.org/zh-cn/essentials/nested-routes.html]嵌套路由[/url],不做不知道,实在是太坑了,网上资料demo少之又少,然后自己就做了一个demo,用了vue2.0嵌套路由实现豆瓣电影分页功能,供大家学习学习,写得不好望见谅。 demo截图: [img]http://files.jb51.net/file_images/article/201703/2017031310541629.gif?2017213105515[/img] [b]Demo简单介绍[/b] 主路由: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>
[b]子路由如何跳转同一组件时数据实现更新?[/b] 同样,在top250(charts)上添加了分页功能作为子路由,但指向同一组件:
{
 path: '/charts/:id', //子路由
 component: charts,
 children: [
  {path: '1', component: moviecontent2}, // 同一组件
  {path: '2', component: moviecontent2}, // 同一组件
  {path: '3', component: moviecontent2} // 同一组件
  ]
}
[b]画重点:[/b] 因为路由切换同一组件时,实例已经在第一次进入路由时创建了,之后切换路由不会被创建了,所以只能调用一次created,因此要使用$route监听getData方法,当路由切换的时候,调用getData方法,重新获取数据。
created: function () {
    //第一次进入路由时数据的更新
    this.$http.jsonp()
},
watch: {
 '$route': 'getData' //切换路由,调用getData方法
},
methods: {
 getData: function () {
    //路由切换,重新请求数据
    this.$http.jsonp()
 }
}
数据来自豆瓣电影API。 代码写得好烂,凑合着看吧,反正子路由还是成功的啊! 本demo地址:[url=http://xiazai.jb51.net/201703/yuanma/doubandemo_jb51.rar]doubandemo_jb51.rar[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部