美文网首页前端开发那些事儿
vue路由改变了数据和内容不变的解决办法

vue路由改变了数据和内容不变的解决办法

作者: 赵Wayne | 来源:发表于2021-02-15 20:03 被阅读0次

    场景:
    1.路由改变了但是数据和内容没变,刷新后才变化
    2.动态路由/cate/:id/index.html类似这样只改变id号的场景,由于router-view是复用的,单纯的改变id号并不会刷新router-view

    解决办法有两种:【1】【2】

    【1】给router-view添加key形如<router-view :key ="">,:key vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可,key不同则不会复用,key相同则复用组件(普遍使用这个方法)
    <template>
      <div id="app"> 
        <keep-alive :include="this.$store.state.keepAlive" exclude="">
            <router-view :key ="$route.fullPath">
                <!-- 视图组件-->
            </router-view>
        </keep-alive>
    </div>
    </template>
    

    router-view组件复用与否的几种常见情况:
    (1)不设置 router-view 的 key 属性
    由于 Vue 会复用相同组件, 即 /page/1 跳转到 /page/2 或者 /page?id=1 跳转到 /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 只有beforeRouteUpdate钩子
    (2)设置<router-view :key ="$route.path">
    从/page/1 跳转到 /page/2, 由于这两个路由的$route.path不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
    beforeRouteUpdate => created => mounted
    从/page?id=1跳转到 /page?id=2, 由于这两个路由的$route.path一样都是/page, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为:
    beforeRouteUpdate
    (3)设置<router-view :key ="$route.fullPath">
    从/page/1跳转到/page/2, 由于这两个路由的$route.fullPath不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
    beforeRouteUpdate => created => mounted
    从/page?id=1跳转到/page?id=2, 由于这两个路由的$route.fullPath也不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
    beforeRouteUpdate => created => mounted

    【2】watch监听路由变化拿到变化的ID再请求数据更改data
    methods:{
    },
    watch:{
        //监听页面路由变化
        $route(to,from){
          // console.log(to);//去哪里
          // console.log(from);//从哪来
          //从详情页来进入详情页
          if(from.name=="articleDetails" && to.name=="articleDetails"){
            //Object.assign(this.$data, this.$options.data())
            //var to=decodeURIComponent(to.path)
            //to = to.split("/");
            //var id = to[2]
            var id =this.$route.params.id
            this.listDataFun(id)      
          }
        }
      }
    

    相关文章

      网友评论

        本文标题:vue路由改变了数据和内容不变的解决办法

        本文链接:https://www.haomeiwen.com/subject/tefmxltx.html