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
    },
    {
     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地址：doubandemo_jb51.rar

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

赞 (0)

相关推荐

  • vue实现添加标签demo示例代码

    vue实现添加标签demo示例代码

    本篇文章主要介绍vue添加标签,废话不多说了,下面上具体代码 效果如下: html <div id="app"> <div style="margin-bottom: 4px;"> <span class="selectedItem" v-for="item in selectedItems">{{item.name}} <i class="red fa fa-close (

  • Vue仿手机qq的实例代码(demo)

    Vue仿手机qq的实例代码(demo)

    vue简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 概述 这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐 页面效果展示 免责声明 本项目为开源项目,如有类同,纯属巧合.

  • Vue插件写、用详解（附demo）

    Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一段代码等 2.使用方法 总体流程应该是: [声明插件]--[写插件]--[注册插件]--[使用插件] 写插件和声明插件是同步的,然后注册到Vue对象中(不用担心重复注册),最后在写Vue组件的时候使用写的插件 声明插件 先写一个js文件,这个js文件就是插件文件,里面的基本内容如下: /* 说明: * 插件文件:service

  • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    概述 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入

  • vue.js评论发布信息可插入QQ表情功能

    vue.js评论发布信息可插入QQ表情功能

    本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: <template> <div id="publish"> <!-- 发布内容输入框,利用Html5的新属性contenteditable,实现可编辑文本 ,会自动将插入的IMG标签解析--> <div class="publish_container"> <p contenteditable

  • 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 compon

  • Vue2.0+ElementUI+PageHelper实现的表格分页功能

    Vue2.0+ElementUI+PageHelper实现的表格分页功能

    前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即前端分页)的做法是将数据全部缓存,然后分页显示,这样在数据量较大的时候会对浏览器的速度产生影响,所以考虑之后我使用了后端分页,后端分页的特点是对当前页的数据进行请求,每次当页码变化或者每页数据量变化的时候,就重新发一次请求.这里所用到的技术主要有以下几种: Spring SpringMVC Mybatis VueJS 2.0 ElementUI 后端数据库用的是Mys

  • Zend Framework实现留言本分页功能(附demo源码下载)

    本文实例讲述了Zend Framework实现留言本分页功能的方法.分享给大家供大家参考,具体如下: 这里的分页功能运用了..Zend_Paginator这个组件来实现留言本分页...这里我也是参考PHPCHINA里一位PHPer写的这方面的教程 我实现的坏境以及项目的目录安排是在第三篇教程的基础上写的..如果有朋友不明白目录什么的安排..请用ZF1.6.0以上.请自己前面的文章里找一下这篇教程...我在这里就不多说什么了..谢谢.. 第一步:在我们的控制器里面,也就是indexControll

  • Python爬虫实现的根据分类爬取豆瓣电影信息功能示例

    本文实例讲述了Python爬虫实现的根据分类爬取豆瓣电影信息功能.分享给大家供大家参考,具体如下: 代码的入口: if __name__ == '__main__': main() #! /usr/bin/python3 # -*- coding:utf-8 -*- # author:Sirius.Zhao import json from urllib.parse import quote from urllib.request import urlopen from urllib.reque

  • Python实现的爬取豆瓣电影信息功能案例

    Python实现的爬取豆瓣电影信息功能案例

    本文实例讲述了Python实现的爬取豆瓣电影信息功能.分享给大家供大家参考,具体如下: 本案例的任务为,爬取豆瓣电影top250的电影信息(包括序号.电影名称.导演和主演.评分以及经典台词),并将信息作为字典形式保存进txt文件.这里只用到requests库,没有用到beautifulsoup库 step1:首先获取每一页的源代码,用requests.get函数获取,为了防止请求错误,使用try...except.. def getpage(url): try: res=requests.get

  • Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

  • vue2.0实现分页组件的实例代码

    vue2.0实现分页组件的实例代码

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题 <template> <nav> <ul class="pagination"> <li :

  • vue2.0与bootstrap3实现列表分页效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 直接引入vue的js文件进行页面渲染分页,不是vuex的哦,以下源码可以直接运行哟^_^ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用vue2.0与bootstrap3进行简单列表分页</title> <link href="http:

  • Python爬虫——爬取豆瓣电影Top250代码实例

    Python爬虫——爬取豆瓣电影Top250代码实例

    利用python爬取豆瓣电影Top250的相关信息,包括电影详情链接,图片链接,影片中文名,影片外国名,评分,评价数,概况,导演,主演,年份,地区,类别这12项内容,然后将爬取的信息写入Excel表中.基本上爬取结果还是挺好的.具体代码如下: #!/usr/bin/python #-*- coding: utf-8 -*- import sys reload(sys) sys.setdefaultencoding('utf8') from bs4 import BeautifulSoup imp

  • MVVM框架下实现分页功能示例

    分页这种组件,几乎每一种框架都有这样的组件,近期我们做了新的项目,因为是在新的分支和新的项目中开发的一期任务,属于什么都没有的状态,几乎所有的效果和业务逻辑都需要重新整理和书写,项目正好完结了,把其中用到的一些小方法分想出来,重在分享思路和逻辑,理清思路和逻辑不论是哪一种框架,都可以轻松搞定 先来看一下效果图: 分页效果图 场景概述: 当前页面需要加载 10条数据 ,每次点击下一页如果之前没有请求过接口需要请求数据,如果在一次页面会话中, 请求过的数据不再从新请求,且要保留每一页面的操作结果 (

随机推荐