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

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

相关文章
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
JavaScript Go
|
JavaScript C语言 Go
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem