前言
最近练习Vue,看到官方文档中的嵌套路由,
不做不知道,实在是太坑了,网上资料demo少之又少,然后自己就做了一个demo,用了vue2.0嵌套路由实现豆瓣电影分页功能,供大家学习学习,写得不好望见谅。
官方文档给出的demo:http://jsfiddle.net/yyx990803/L7hscd8h/
本demo地址:https://github.com/liangxiaoxin/doubandemo
demo截图:
douban.gif
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组件上添加入口:
1
2
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。
代码写得好烂,凑合着看吧,反正子路由还是成功的啊!哈哈哈
有兴趣的朋友可以看看我写的豆瓣webapp
豆瓣web-app demo地址:https://liangxiaoxin.github.io/douban-webapp/
demo演示: