当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

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

2018年05月03日  | 移动技术网IT编程  | 我要评论

傲世重生txt下载,杨暗公,小型消毒柜

前言

最近练习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地址：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网