当一个组件被重用时,切换路由,该组件不会被销毁。该组件的created也不会被调用,如果在created中有获取数据的操作,切换路由后,就不会再获取新的数据了,界面上就没有刷新。

其实官方文档就有解决方法:

官方连接https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

但是,这里还需要注意一点,beforeRouteUpdate只有这种情况才会被调用:当前路由改变,但是该组件被复用时调用。例如带动态参数的路径 /user/:id,
从 /user/1 切换到 /user/2时,由于会渲染同样的user组件,因此组件实例会被复用,这个钩子就会在这种情况下被调用。

如果是/adduser切换到/user/1是不会调用beforeRouteUpdate的,这种情况下应该使用watch。

vue-router组件重用 路由切换时的问题的更多相关文章

  1. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  2. vue(组件、路由)懒加载

    const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...

  3. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  4. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  5. Vue的组件和路由

    组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 组件的 ...

  6. 记录21.07.24 —— Vue的组件与路由

    VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. vue 使用同一组件,切换时不触发created、mounted钩子

    两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...

  9. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

随机推荐

  1. Shell企业案例实战和企业面试题

    shell企业面试题 1.批量创建带有随机小写字符文件程序 使用for循环在/pizza目录下创建10个html文件,其中每个文件包含10个随机小写字母加固定字母_pizza 1.思路分析: 核心是: ...

  2. Shell中数组的使用

    数组是一个很有用的数据结构,经常使用的功能有初始化,遍历,查找,获取数组长度等操作 一.初始化 小括号中使用空格分开的数据结构就是一个数组,也可使用下标添加元素 arr=(1 'nice' '2day ...

  3. [BJOI2019]光线[递推]

    题意 题目链接 分析 令 \(f_i\) 表示光线第一次从第一块玻璃射出第 \(i\) 块玻璃的比率. 令 \(g_i\) 表示光线射回第 \(i\) 块玻璃,再射出第 \(i\) 块玻璃的比率. 容 ...

  4. 折半、快排、插入排序的Java实现

    插入排序 import java.util.Arrays; public class InsertionSort { /** * 对数组里面进行插入排序 * 参数1 数组 * 参数2 数组大小 */ ...

  5. Windows系统下的TCP参数优化(注册表\TCPIP\Parameters)

    转自:https://blog.csdn.net/libaineu2004/article/details/49054261 Windows系统下的TCP参数优化   TCP连接的状态与关闭方式及其对 ...

  6. flutter获取状态栏高度

    import 'dart:ui'; MediaQueryData.fromWindow(window).padding.top 系统默认的appBar等高度 位于Dart Packages/flutt ...

  7. Linux几大服务

    server0操作: 1.创建/devops目录,并修改其SELINUX安全上下文 # mkdir /devops # vim /devops/1.mp3# chcon -R -t samba_sha ...

  8. Alan Turing的纪录片观后感

    清明假期,火车上闲着,上B站看了图灵的纪录片 好吧,感想就两个词,数字化 和 自动化

  9. sqlserver2008R2 评估期已过

    早上打开win程序-卡死不动了,查看三层数据库连接-连接不上数据库 打开数据库-提示 评估期已过 解决方法: 进入sqlserver的安装中心-点击 维护-版本升级 输入密钥:企业版:R88PF-GM ...

  10. spring整合junit进行测试

    以下只是一个模板,大家记得改变配置文件 package cn.itcast.crm.dao; import org.junit.Test; import org.junit.runner.RunWit ...