Vue3 Refresh Router View

Add a key to router-view, then change the key, router-view will reload.

Create a variable with vue ref.

import { ref } from "vue";

export const routeViewKey = ref(Math.random().toString());
export const reloadRouteView = () => {
  routeViewKey.value = Math.random().toString();
};

Then use routeViewKey as the key of router-view.

<router-view :key="routeViewKey"></router-view>

import { routeViewKey } from "yourpath";
export default {
  setup() {
    return { routeViewKey };
  },
};

Usage

Call reloadRouteView