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
Vue怎么通过路由实现页面的局部跳转
Vue怎么通过路由实现页面的局部跳转
333 0
|
6月前
|
JavaScript
vue解决方案 | router-view路由切换时页面不刷新
vue解决方案 | router-view路由切换时页面不刷新
290 0
|
7月前
|
JavaScript
vue强制刷新组件的3种方法
vue强制刷新组件的3种方法
|
8月前
|
JavaScript
Vue 路由切换时页面刷新页面重新渲染
在Vue中,路由切换并不自动重新渲染页面,这可能导致传递参数到子组件时出现问题。使用`this.$route.replace(&#39;地址&#39;)`或`this.$route.push({name:&#39;地址&#39;,params:{key:value}})`进行跳转,但子组件不会响应变化。为解决此问题,需监听`$route`对象的变化,如图所示,通过`watch: {$route}`确保页面更新。
450 5
|
8月前
|
缓存 JavaScript 前端开发
Vue 组件强制刷新方式
Vue 组件强制刷新方式
|
JavaScript 网络架构
vue | 动态路由刷新空白
解决在vue3中添加动态路由后,刷新页面空白,并且提示没有正确的路径。
295 0
vue | 动态路由刷新空白
|
8月前
|
JavaScript
Vue刷新子路由
Vue刷新子路由
|
资源调度 JavaScript 前端开发
vue3动态路由如何设置
vue3动态路由如何设置
252 0
|
JavaScript
vue3路由跳转方法
首先,vue3.0跳转和vue2.0跳转方式差别不大,但是还有需要注意的地方。这里我介绍两种比较常见的路由跳转方法。
|
JavaScript 网络架构
vue动态路由操作
Vue动态路由操作指的是在Vue应用中根据不同的参数,动态生成相应的路由。一般来说,我们可以使用Vue的路由插件vue-router来实现动态路由操作。
60 0