关于导航路由的其他细节

声明式导航：router-link
编程式导航：push|replace

1、在三级联动等遍历出许多标签，点击标签跳转

如果使用声明式导航router-link，可以实现路由的跳转与传递参数，但是需要注意，此方法会出现卡顿现象。因为router-link是一个组件，当服务器的数据返回之后，会循环出很多的router-link组件。若创建1000+ 组件实例的时候，将一瞬间创建1000+多的内存，导致出现卡顿现象。所以最好的解决方法是使用编程式导航+事件委派。

<a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>

在标签身上做标记，把参数传下去并整理起来再进行跳转

    goSearch(event) {
      //  最好的解决方案：编程式导航+事件委派
      //  利用事件委派存在一些问题：1、点击一定是a标签 2、如何获取参数【1、2、3级分类的产品的名字、id】
      //  1、存在一些问题：事件委派、是全部的子节点【h3、dt、dl、em】的事件委派给父亲节点
      //  2、点击a标签的时候，才会进行路由跳转【怎么能确定点击的一定是a标签】
      //  3、确定a标签过后，如何区分是1、2、3哪一级的标签
      //  第一个问题：把子节点当中a标签，加上自定义属性data-categoryName,其余的子节点是没有的
      let node = event.target;
      // 获取到当前触发的这个事件的节点【h3、dt、dl、em】，需要带有data-categoryname这样的节点【一定是a标签】
      //  节点有一个属性dataset属性，可以获取节点的自定义属于与属性值
      let {categoryname, category1id, category2id, category3id} = node.dataset;
      //  如果标签身上拥有categoryname一定是a标签
      if (categoryname) {
        //  整理路由跳转的参数
        let location = {name: 'search'};
        let query = {categoryName: categoryname}
        //  一级分类、二级分类、三级分类的a标签
        if (category1id) {
          query.category1Id = category1id
        } else if (category2id) {
          query.category2Id = category2id
        } else {
          query.category3Id = category3id
        }
        //判断：如果路由跳转的时候，带有params参数，捎带传递过去
        if (this.$route.params) {
          location.params = this.$route.params
          //  动态给location配置对象添加query属性
          location.query = query;
          //  路由跳转
          this.$router.push(location)
        }
        console.log(this.$route)
      }
    },

 注意：goSearch事件设置在最外层的壳。

2、合并params与query参数

        //判断：如果路由跳转的时候，带有params参数，捎带传递过去
        if (this.$route.params) {
          location.params = this.$route.params
          //  动态给location配置对象添加query属性
          location.query = query;
          //  路由跳转
          this.$router.push(location)
        }

      if (this.$route.query) {
        //代表的是如果有query参数也带过去
        let location = {name: "search", params: {keyword: this.keyword || undefined}}
        location.query = this.$route.query
        this.$router.push(location)
      }

3、利用watch监听路由变化

当点击导航，路由发生变化，可以监听其每一次变化来重新发送请求更新页面。

  watch: {
    $route() {
      //  再次发请求之前整理带给服务器参数
      Object.assign(this.searchParams, this.$route.query, this.$route.params)
      //  再次发起ajax请求
      this.getDate()
      //  每一次请求完毕，应该把相应的1、2、3级分类的id置空，让他接受下一次的新的1、2、3id
      this.searchParams.category1Id = ''
      this.searchParams.category2Id = ''
      this.searchParams.category3Id = ''
    }
  }