vue.js - 为什么点击跳转页面后query参数丢失？

Question

问题描述

点击三级分类时会重定向到 home，这里不是重定向的问题（而是参数丢失的问题），因为我试过了，在 route.js 里把重定向的代码去掉后，页面会出现空白，路径变为 http://localhost:8080/#/

问题出现的环境背景及自己尝试过哪些方法

1. 跳转的路径没问题，如图，手动添加参数是能正常跳转的
   
2. 使用 this.router.push 跳转前打印参数，发现也没问题，如图
   

相关代码

Type.vue：

if (categoryname) {
        let location = {
          name:'search',
          query:{categoryName:categoryname},
        };
        // 一级分类的 a
        if (category1id) {
          location.query.category1Id=category1id;
        } else if (category2id) {
          // 二级分类的 a
          location.query.category2Id = category2id;
        } else {
          // 三级分类的 a
          location.query.category3Id = category3id;
        }
        if(this.$route.params.keyword){
          location.params = this.$route.params;
        }
        this.$router.push(location);
      }

route.js：

export default [
    {
        path: "/home",
        component: Home,
        meta:{show:true},
    },
    {
        name:"search",
        path:"/search/:keyword?",
        component:Search,
        meta:{ show:true },
    },
    {
        path: '/',
        redirect:"/home"
    },
]

Search.vue

watch:{
      $route(newValue,oldValue){
        Object.assign( this.searchParams, this.$route.query, this.$route.params )
        this.getData()
        //  把相应的1，2，3级分类的id清空
        this.searchParams.category1Id = ''
        this.searchParams.category2Id = ''
        this.searchParams.category3Id = ''
      }
    },

你期待的结果是什么？

点击三级分类正常跳转，而不是重定向到 home 或 http://localhost:8080/#/

Answer 1

// ...
beforeRouteUpdate(to, from, next) {
  Object.assign(this.searchParams, to.query, to.params)
  this.getData()
  // 把相应的1，2，3级分类的id清空
  this.searchParams.category1Id = ''
  this.searchParams.category2Id = ''
  this.searchParams.category3Id = ''
  next()
},
// ...