H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue路由刷新问题,两个路由对应一个组件,如何能让路由重载

现在两个路由对应同一个组件
/a /b 两个路由都对应componentA组件,
在切换的时候,组件不会重载,created等事件不会触发,如何让每一次切换都触发组件重载

回答:

谢邀,不过下次建议多把代码发出来!我的做法是下面这样

vue的路由有如下对象
clipboard.png

fullPath:路径(包括参数)
path:路由路径
query:参数(id:1)
params:参数(id=1)

data(){
...
}
mounted(){...},
watch: {
    //监听路由,只要路由有变化(路径,参数等变化)都有执行下面的函数,你可以
    $route: {
        handler: function (val, oldVal) {
           let _urlParams = this.$route.params;
            //created事件触发的函数可以在这里写...  
            //都是componentA组件,声明周期还在,改变不了
        },
        deep: true
    }
},

回答:

created只会触发一次,路由更新时候 路由组件的beforeRouteUpdate钩子会出发,在这里面重新获取数据并更新。

回答:

写在共用组件文件里

data(){
...
}
mounted(){...},
 watch: {          
            $route: {
                handler: function (val, oldVal) {
                    this.worksheet_type = this.$route.params.type;                     
                },
                deep: true
            }
        },

在共用组件上加上key
<div :key="$route.path">

回答:

当前组件内watch地址变化,变化时初始化,将你created里的初始化代码放在一个函数里,调用一下就好了

回答:

vue-router文档

回答:

<router-view :key=”key”></router-view>

computed: {
key() {

// 或者 :key="$route.path" 只要保证key唯一就可以了
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()

}
}

回答:

使用watch监听$route
例子:
获取数据方法为getData
watch:{$route:'getData'}
这样每次参数变化或者子路由变化就会调用getData方法

本文地址:H5W3 » vue路由刷新问题,两个路由对应一个组件,如何能让路由重载

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址