解决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实例被复用问题的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-06-23

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原理并实现一个小demo

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

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嵌套路由方式(页面路径跳转但页面显示空白)

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

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

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-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 问题描述: 提示:在安装过程中报错,缺少依赖: 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 init webpack 建vue项目报错的解决方法

使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

nginx 下安装配置 phpadmin报错的解决方法

如下所示: 系统版本:centos7.0 64位 NGINX版本:nginx version: nginx/1.9.8 PHP版本:PHP 7.0.0 (cli) (built: Dec  1 2015 17:53:27) ( NTS ) mysql版本:mysqld  Ver 5.7.10 phpmyadmin版本:4.5.2-all-languages 部署完phpmyadmin,访问主页报错: Error during session start; please check your PH

Vue2.x中利用@font-size引入字体图标报错的解决方法

利用 vue-cli 搭建的项目平台 利用stylus写的css样式 有 css-loader 依赖包x 下图是 webpack.base.conf.js 关于字体文件的配置 有人这里会有重复的字体文件的配置,删除一项即可 出现的问题:引入字体图标出现问题 1.报错 将字体引入的相对路径改成绝对路径 相对路径 绝对路径 2.不报错,但是出现的字体图标是小方框 有警告信息: 小方块: 报错是因为重定向的问题 出现上述问题的原因 ①没在用到的地方引入字体的样式文件 ②使用的是后缀名为 .styl 文

详解Vue项目在其他电脑npm run dev运行报错的解决方法

一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因 缺少 node_modules 里面的依赖.在项目目录下使用 npm install 然后再 npm run dev. 如果在这一步当中, npm install 执行的过程中,处于一直卡顿的状态.说明网络状况不佳.建议使用 cnpm 淘宝源. 淘宝源 使用 cnpm -v 查看是否已经安装 cnpm

VS2017添加EF的MVC控制器报错的解决方法

VS2017添加EF的MVC控制器报错的解决方法,供大家参考,具体内容如下 1. 错误描述:no database provider has been configured fot this DbContext. 此类错误是上下文的注册造成的.解决方式在DBContext中重写OnConfiguring方法去注入数据库连接. DbContext中: public static string ConnectionString { get; set; } protected override voi

angularjs使用gulp-uglify压缩后执行报错的解决方法

问题出现原因是由于压缩之后变量变成了,e.s.t等,需要依赖注入的方法没有使用中括号注入,而在function的参数中直接使用,导致压缩之后无法识别需要依赖注入的模块.例如: var module= angular.module('homeApp', ['ui.router']); module.config(function ($sceProvider) { $sceProvider.enabled(false); }) 改为: var module= angular.module('home

window环境下npm install node-sass报错的解决方法

最近准备想用vue-cli初始化一个项目,需要sass-loader编译: 发现window下npm install node-sass和sass-loader一直报错, window 命令行中提示我全局安装 node-gyp ,有些提示好像是本地找不到python, 于是我按照提示安装node-gyp node-gyp是一个用Node.js编写的跨平台命令行工具,用于编译Node.js的本地插件模块. node-gyp node-gyp官方网址  https://www.npmjs.com/p

vuex2中使用mapGetters/mapActions报错的解决方法

解决方案 可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread . 接着在babel的配置文件 .babelrc 中应用插件: { "presets": [ ["es2015", { "modules": false }] ], "plugins": ["transform-object

Python3.5 win10环境下导入kera/tensorflow报错的解决方法

本文实例讲述了Python3.5 win10环境下导入keras/tensorflow报错的解决方法.分享给大家供大家参考,具体如下: 我在win10 Python3.5.2安装keras,然后导入时报错如下: Python 3.5.2 |Continuum Analytics, Inc.| (default, Jul 5 2016, 11:41:13) [MSC v.1900 64 bit (AMD64)] on win32 Type "help", "copyright&

Mysql5.7及以上版本 ONLY_FULL_GROUP_BY报错的解决方法

近期在开发过程中,因为项目开发环境连接的mysql数据库是阿里云的数据库,而阿里云的数据库版本是5.6的.而测试环境的mysql是自己安装的5.7.因此在开发过程中有小伙伴不注意写了有关group by的sql语句.在开发环境中运行是正常的,而到了测试环境中就发现了异常. 原因分析:MySQL5.7版本默认设置了 mysql sql_mode = only_full_group_by 属性,导致报错. 其中ONLY_FULL_GROUP_BY就是造成这个错误的罪魁祸首了,对于group by聚合