vue3 点击按钮，页面路由刷新

最新推荐文章于 2024-08-12 16:28:02 发布

前端小云儿

最新推荐文章于 2024-08-12 16:28:02 发布

阅读量658

点赞数

分类专栏： vue3知识点文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136293916

版权

vue3知识点专栏收录该内容

69 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在Vue3应用中，通过点击按钮实现页面路由的刷新。主要涉及Vue3的基础知识和路由管理。

摘要由CSDN通过智能技术生成

//定义小仓库
import {
  defineStore
} from "pinia";


//第一个小仓库
let useHomeStore = defineStore('Home', {
  //存储数据user
  state: () => {
    return {
    
      refresh: false
    }
  },
  actions: {
   
    isRefresh() {
      this.refresh = !this.refresh
    }
  },
  getters: {

  }

})

export default useHomeStore

在路由根节点使用

<script setup>
import { nextTick, ref, watch } from 'vue'
let isRefreshFlag = ref(true)
import useHomeStore from '../../stores/modules/home'
let homeStore = useHomeStore()
watch(
  () => homeStore.refresh,
  () => {
    isRefreshFlag.value = false
    nextTick(() => {
      isRefreshFlag.value = true
    })
  }
)
</