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)
    }

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