解决vue路由组件vue-router实例被复用问题

最近在开发过程中遇到如下问题:

当前路由是这样的

http://127.0.0.1:3010/order?keywords=22

只改变keywords的值，路由不跳转

http://127.0.0.1:3010/order?keywords=33338

造成这样的原因如下图所示：

参考文档:https://router.vuejs.org/en/essentials/dynamic-matching.html

这种情况网上的解决方式:

使用vue-router切换路由时会触发组件树的更新，根据定义的路由渲染一个新的组件树，大致的切换过程是这样的： 
- 停用并移除不需要的组件 
- 验证切换的可行性 
- 复用没有进行更新的组件 
- 启用并激活新的组件

那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路由组件vue-router实例被复用问题的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue3使用vue-router如何实现路由跳转与参数获取

    目录 vue-router实现路由跳转与参数获取 路由跳转和传参 路由跳转三种方法的总结 一.第一种 二.第二种 三.第三种 vue-router实现路由跳转与参数获取 路由跳转和传参 import { defineComponent, onMounted, reactive, readonly, ref } from 'vue'; import { useRouter, useRoute } from 'vue-router'; export default defineComponent({

  • vue中vue-router的使用说明(包括在ssr中的使用)

    vue中vue-router的使用说明(包括在ssr中的使用)

    目录 安装vue-router 创建配置文件 路由映射规则配置 路由设置内容 入口文件配置 app.vue配置 router中使用props 其他配置属性 导航守卫 vue笔记之vue-router的使用(包括ssr中的使用) 安装vue-router 命令行执行: npm i vue-router -S 创建配置文件 在项目src文件夹下创建config文件夹存放路由配置 在config文件夹下新建router.js和routes.js router.js: 存放路由设置 routes.js:

  • vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    目录 如图所示从欢迎页跳转至用户列表 查询相关资料,有两种解决方案 如图所示从欢迎页跳转至用户列表 欢迎页:路径---welcome 用户页:路径---users 可以看到路径发生了跳转,但跳转后的用户列表页面显示空白.路由嵌套代码如下: 查询相关资料,有两种解决方案 1.path路径不用携带/ (未解决) 2.在home页面需添加router-view标签 在home页面的template下添加<router-view> </router-view>后,用户页面占据了整个页面,而

  • 详解Vue-router嵌套路由

    详解Vue-router嵌套路由

    目录 步骤 1.配置路由规则,使用children配置项: 2.跳转(要写完整路径): 总结 步骤 1.配置路由规则,使用children配置项: routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写:/news component:News }, { path:'message',//

  • vue2安装vue-router报错的解决方法

    vue2安装vue-router报错的解决方法

    目录 项目场景: 问题描述: 原因分析: 解决方案: 附加: 总结 项目场景: 在vue2中安装vue-router 问题描述: 提示:在安装过程中报错,缺少依赖: PS D:\WebDeplpyer\workspace\Vue_Basic\vue_test> npm i vue-routernpm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolvi

  • Vue路由vue-router用法讲解

    Vue路由vue-router用法讲解

    目录 一.vue-router 1.简介 2.使用流程 二.基本路由实现 三.嵌套路由 四.缓存路由组件 1.为什么使用 2.如何使用 3.完整代码 五.传递参数 1.通过url传递(param传递) 2.通过query传递 3.通过param传递 六.$route 与 $router 的区别 1.$route 2.$router 3.跳转路由的三种形式 一.vue-router 1.简介 (1)SPA:Single Page Application(单页应用),简单理解就是只有一个web页面的

  • 深入了解vue-router原理并实现一个小demo

    深入了解vue-router原理并实现一个小demo

    目录 插件编写的基本方法 需求分析 我们先看看vue-router的使用步骤 由此我们看看vue-router内部做了什么? 实现思路 首先我们看看如何将$router挂载到组件上​ ​如何实现那两个路由组件 先来看看router-link 完整demo代码 总结 插件编写的基本方法 推荐大家先看看官方给出的插件使用和开发方法 https://vuejs.bootcss.com/guide/plugins.html​ 需求分析 我们先看看vue-router的使用步骤 1.use Vue.use

  • vue3使用vue-router及路由权限拦截方式

    目录 使用vue-router及路由权限拦截 vue3使用vue-router讲解 使用vue-router及路由权限拦截 vue3 使用 vue-router 的方式和 vue2 基本一样,只不过初始化路由时需要用到一些函数来定义而已,另外 vue-cli 工具本身在创建 vue3 项目时就可以根据提示来进行安装配置 vue-router , 所以本篇只是针对那些忘记安装的小伙伴. 第一步肯定是要先安装啦: npm install vue-router@4 接着我们在根目录 src 下创建 r

  • 解决vue路由组件vue-router实例被复用问题

    解决vue路由组件vue-router实例被复用问题

    最近在开发过程中遇到如下问题: 当前路由是这样的 http://127.0.0.1:3010/order?keywords=22 只改变keywords的值,路由不跳转 http://127.0.0.1:3010/order?keywords=33338 造成这样的原因如下图所示: 参考文档:https://router.vuejs.org/en/essentials/dynamic-matching.html 这种情况网上的解决方式: 使用vue-router切换路由时会触发组件树的更新,根据

  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4 . 编程式路由传参 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递 路由配置 路径参数 用冒号 : 表示. const routes = [ // 动态段以冒号开始 { pat

  • vue嵌套组件传参实例分享

    vue嵌套组件传参实例分享

    目录 递归嵌套组件参数传递 深层递归组件事件丢失 EventBus 什么事EventBus? 前言: 假设我们已经了解vue组件常见的有父子组件通信,兄弟组件通信.而父子组件通信很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件.那么当两个组件之间不是父子关系,怎样传递数据呢? 先来看一下这个例子: 递归嵌套组件参数传递 我们封装了一个名为 NestedDir 的子组件(嵌套目录的意思),内容如下(用到了element ui组件)

  • Vue.js组件使用开发实例教程

    组件 组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue.js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. Vue.js的组件可以理解为预先定义好了行为的ViewModel类.一个组件可以预定义很多选项,但最核心的是以下几个: 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据(data):一个组件的初始数据状态.对于可复用的组件来说,这通常是私有的状态. 接受的外部参数(p

  • Vue函数式组件的应用实例详解

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1.以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件需要的一切都是通过context参数传递,它是一个包括如下字段的对象: props:提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数,返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象.也

  • vue抽出组件并传值实例

    使用父组件向子组件传值的方式 1,抽出的组件以及写法 2,注册使用的父组件以及传值,父组件return images 补充知识:vue如何抽取公共组件并全局注册 项目的抽象程度越高,代码修改起来就越方便,如何抽取一个公共的组件并且全局注册呢? 步骤 结构图 公共组件代码 <template> <img class="wordLook" :src="imgWifi" width="17%" @click="wifiBri

  • Vue路由组件通过props配置传参的实现

    Vue路由组件通过props配置传参的实现

    目录 一.基于params参数传递 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 二.基于Query和params参数传递(通用) 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 本文主要介绍了 Vue路由组件通过props配置传参的实现,分享给大家,具体如下: 一.基于params参数传递 1.index.js

  • vue路由组件按需加载的几种方法小结

    1. 普通加载 使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题

  • 前端配合后端实现Vue路由权限的方法实例

    前端配合后端实现Vue路由权限的方法实例

    目录 前言 实现思路 代码实现 登录 本地路由列表 生成路由 挂载路由 总结 前言 在开发管理后台时,都会存在多个角色登录,登录成功后,不同的角色会展示不同的菜单路由.这就是我们通常所说的动态路由权限,实现路由权限的方案有多种,比较常用的是由前端使用addRoutes(V3版本改成了addRoute)动态挂载路由和服务端返回可访问的路由菜单这两种.上一篇文章讲了纯前端实现路由权限,没看过的可以点击文章链接纯前端实现Vue路由权限.今天主要是基于后端返回路由菜单的基础上,实现路由权限功能. 实现思

  • VUE兄弟组件传值操作实例分析

    本文实例讲述了VUE兄弟组件传值操作.分享给大家供大家参考,具体如下: 1.兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据 2.创建一个Vue的实例,让各个兄弟共用同一个事件机制. 3.传递数据方,通过一个事件触发bus.$emit(方法名,传递的数据). 4.接收数据方,通过mounted(){}触发bus.$on(方法名,function(接收数据的参数){用该组件的数据接收传递过来的数据}),此时函数中的this已经发生了改变,可以使用箭头函数. 我们可以创建一个单独的js文件

随机推荐