Vue刷新子路由

简介: Vue刷新子路由

Vue刷新子路由、子组件


原理:使用v-if的特性,达到刷新组件的效果;


1.定义子路由


router.js部分

{
        path: '/',
        name: 'index',
        component: Index,
        children: [
            {
                path: '/',
                redirect: '/admin/home',
            },
            {
                path: "/admin/home",
                component: () => {
                    return import('@/views/home')
                }
            },
          ]  


2.设置子路由的视图出口


定义好子路由后,我们需要在父路由组件中为其子路由定义视图出口

<router-view/>


3.给子路由的出口添加v-if指令。


<router-view v-if="updateViewStatus"/>


4.给刷新按钮的事件部分,改变v-if指令的状态即可。


const updateView = () => {
      updateViewStatus.value = false;
      setTimeout(() => {
        updateViewStatus.value = true;
      }, 0)
    }

:这里使用定时器的原因是因为如果直接同时写两个同步的更改响应式变量的操作,是不会生效的,它们会相互抵消掉,所以使用定时器让一个同步执行一个异步执行,这样才能够成功。


相关文章
|
JavaScript 前端开发
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
|
12月前
|
缓存 前端开发 UED
React Suspense 懒加载详解
【10月更文挑战第18天】React Suspense 是 React 16.6 引入的新特性,主要用于处理异步数据获取和组件懒加载。本文从 Suspense 的基本概念出发,介绍了其在代码分割和数据获取中的应用,通过具体代码示例展示了如何使用 `React.lazy` 和 `Suspense` 实现组件的懒加载,并探讨了实践中常见的问题及解决方法,帮助开发者提升应用性能和用户体验。
585 2
|
SQL druid Java
java mysql druid mybatis-plus里使用多表删除出错的一种处理方式
java mysql druid mybatis-plus里使用多表删除出错的一种处理方式
225 0
|
10月前
|
存储 网络协议 C语言
【C语言】位操作符详解 - 《开心消消乐》
位操作符用于在位级别上进行操作。C语言提供了一组位操作符,允许你直接操作整数类型的二进制表示。这些操作符可以有效地处理标志、掩码、位字段等低级编程任务。
381 8
|
11月前
|
分布式计算 资源调度 Hadoop
【赵渝强老师】基于ZooKeeper实现Hadoop HA
本文介绍了如何在4个节点(bigdata112、bigdata113、bigdata114和bigdata115)上部署HDFS高可用(HA)架构,并同时部署Yarn的HA。详细步骤包括环境变量设置、配置文件修改、ZooKeeper集群启动、JournalNode启动、HDFS格式化、ZooKeeper格式化以及启动Hadoop集群等。最后通过jps命令检查各节点上的后台进程,确保部署成功。
358 0
|
存储 NoSQL Java
分布式锁,Redission,其它实现问题讲解,以及面试题回答案例
分布式锁,Redission,其它实现问题讲解,以及面试题回答案例
568 1
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
180 0
vue3.2中setup语法糖父组件如何调用子组件中的方法
vue3.2中setup语法糖父组件如何调用子组件中的方法
vue3.2中setup语法糖父组件如何调用子组件中的方法
|
存储 Java Linux
Linux安装HBase的详细教程及常用方法
Linux安装HBase的详细教程及常用方法
1303 1
|
Kubernetes 应用服务中间件 Linux
kubernetes 部署 nginx-ingress-controller
kubernetes 部署 nginx-ingress-controller
448 0