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

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

发布时间 - 2026-01-11 00:08:37 点击率：次

前言

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

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

# vue.js实现分页 # vue嵌套路由实现分页 # vue.js # 分页 # Vue2 响应式系统之分支切换 # Vue2响应式系统介绍 # Vue2 响应式系统之异步队列 # vue2路由方式--嵌套路由实现方法分析 # Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐) # vue2.0使用v-for循环制作多级嵌套菜单栏 # 详解vue2.0 transition 多个元素嵌套使用过渡 # Vue2响应式系统之嵌套 # 写得 # 用了 # 不做 # 少之又少 # 跳转 # 看吧 # 就做 # 要使 # 大家多多 # 文档 # 网上 # pre # newmovie # hot # ing # js # const # class # brush

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：利用 DeepSeek 辅助进行编译器原理课程学习

下一篇：yii2计划任务不成功怎么解决

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：利用 DeepSeek 辅助进行编译器原理课程学习

下一篇：yii2计划任务不成功怎么解决