本篇继续介绍vue-router,我们需要要完成这样个demo:《分页显示文章列表》;这里我们以博客园首页列表为例简化处理:

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

按照上图框选所示,简单分为蓝色部分文章组件(ArticleItemComponent),橙色框选部分列表组件(ArticleListComponent);分页部分我们就简单通过router-link指令构建满足演示即可,我们的代码实现逻辑:

1、列表组件初始化数据,传递给文章组件进行渲染

2、路由改变时重新初始化列表组件,更新数据

请看我们的第一版代码:

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="i