vue-router 组件复用问题详解

组件系统是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 组件复用导致路由参数失效的问题。

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

您可能感兴趣的文章:

  • Vue.js路由组件vue-router使用方法详解
  • VueJs路由跳转——vue-router的使用详解
  • Vue系列：通过vue-router如何传递参数示例
  • vue-router跳转页面的方法
  • vue-router：嵌套路由的使用方法
  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
  • Vue.js实战之利用vue-router实现跳转页面
  • 详解vue2路由vue-router配置（懒加载）
  • 详解vue-router 2.0 常用基础知识点之router.push()
  • 详解vue-router 2.0 常用基础知识点之router-link
赞 (0)

相关推荐

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • 详解vue-router 2.0 常用基础知识点之router-link

    前端采用前后端分离的方式进行开发,我们使用vue2.0框架,做单页面应用难免会用到vue-router,今天把项目中的用到router-link摘出来,一是想整理一下这些用法,方便下次快速查找,二是重新再过一下vue-router,增加熟悉度.也希望下面这些例子能帮到其他使用vue-router的朋友. 1,$route.params 类型: Object 一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象. path: '/detail/:id'

  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

  • vue-router跳转页面的方法

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

  • 详解vue-router 2.0 常用基础知识点之router.push()

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL. 当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="...&

  • VueJs路由跳转——vue-router的使用详解

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

  • vue-router：嵌套路由的使用方法

    vue-router：嵌套路由的使用方法

    模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

  • Vue系列：通过vue-router如何传递参数示例

    使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na

随机推荐