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

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

前言

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

},

{

http://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组件上添加入口:

1

2&lhttp://t;/router-link>

3

在charts组件上添加出口:

子路由如何跳转同一组件时数据实现更新？

同样，在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_jb51.rar

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。