vue-router 组件复用问题详解


Posted in Javascript onJanuary 22, 2018

组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件,通过组合组件来组成应用程序,结合 vue-router 的路由功能将各个组件映射到相应的路由上,通过路由的变化来告诉Vue要在哪里渲染他们,实现各个组件、各个页面之间的跳转导航。

问题

使用 vue-router 切换路由时会触发组件树的更新,根据定义的路由渲染一个新的组件树,大致的切换过程是这样的:

  1. 停用并移除不需要的组件
  2. 验证切换的可行性
  3. 复用没有进行更新的组件
  4. 启用并激活新的组件

具体路由切换控制流程请参考官方文档:切换控制流水线

那 vue-router 是怎么判断某一个组件可以复用的呢? 我们看一下下面这条路由配置:

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

这是通过文章ID加载对应文章页面的路由,第一次访问时, Post.vue 这个组件会被渲染到组件树中,mounted安装组件时通过文章ID获取文章内容展示到页面上,当我们访问另一篇文章时,路由参数 :postId 发生改变,按照我们的预期应该会展示新文章的内容,但是事与愿违。

我们看到的还是之前的文章,虽然路由参数已发生更改,但是 vue-router 会以为你访问的是 Post.vue 这个组件,由于之前已经渲染过该组件,所以会直接复用之前的组件,并且 不会 执行组件中的任何操作包括 mounted 之类的生命周期函数。

所以我们最终看到的还是原来组件的内容。

那要怎么才能实现我们期望的效果呢?下面介绍一种有效的解决方法

解决方法

我们可以使用 watch 侦听器来监听路由的变化情况,根据路由参数的变化来响应相应的数据,具体实现过程是这样的:

定义数据获取方法

首先定义一个获取文章的方法,根据文章ID从后台获取对应的文章信息。

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

监听路由

接着是在路由切换的时候判断目标组件是否是 Post.vue 组件,这里可以根据定义的路由名称 name 实现,如果是,我们就可以从路由信息中获取目标文章ID来更新组件内容。

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

组件初始化

这里需要注意的是, 当组件首次被挂载到组件树上时,对路由的监听是无效的 ,这时我们需要在生命周期钩子 mounted 对组件进行初始化工作:

mounted() {
  this.getPost(this.$route.params.postId);
}

写在最后

通过上面的方法就可以实现组件内容随路由参数的变化而更新了,有效解决了 vue-router 组件复用导致路由参数失效的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue+element实现表单校验功能
May 20 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
详解webpack多页面配置记录
Jan 22 #Javascript
详解html-webpack-plugin用法全解
Jan 22 #Javascript
js构造函数创建对象是否加new问题
Jan 22 #Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 #Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 #Javascript
Angular17之Angular自定义指令详解
Jan 21 #Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 #Javascript
You might like
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
python求众数问题实例
2014/09/26 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python实现ftp文件传输功能
2020/03/20 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
考研英语辞职信
2015/05/13 职场文书
2016情人节宣传语
2015/07/14 职场文书