vue 跳转（跳转接收参数）问题总结

（一） 转新页面

    1.追加跳转   this.$router.push()   

        使用说明： this.$router.push(  { 跳转地址（可用name或path）: ' 跳转地址名称或地址'  , query（跳转后刷新不消失）:{参数1:参数1 }  ，params（跳转后刷新消失）:{参数1:参数1 } }   )

      追加说明： 在本页面跳转，跳转后可以后退到之前的页面

        实例： this.$router.push({name:'home',query:{id：‘123’}})

    2.取代跳转   this.$router.replace()

 使用说明： this.$router.replace(  { 跳转地址（可用name或path）: ' 跳转地址名称或地址'  , query（跳转后刷新不消失）:{参数1:参数1 }  ，params（跳转后刷新消失）:{参数1:参数1 } } )

      追加说明： 在本页面跳转，跳转后不可以后退到之前的页面

        实例： this.$router.replace({name:'home',query:{id：‘123’}})

    3.新开页面跳转  const news = this.$router.resolve()  window.open(news.href,'_blank')

 使用说明： this.$router.resolve(  { 跳转地址（可用name或path）: ' 跳转地址名称或地址'  , query（跳转后刷新不消失）:{参数1:参数1 }  ，params（跳转后刷新消失）:{参数1:参数1 } } )    

  追加说明：跳转新页面

  实例（1）：const news =  this.$router.resolve({name:'home',query:{id：‘123’}})

             window.open(news.href,'_blank')

  实例（2）：{news }= this.$router.resolve({name:'home',query:{id：‘123’}})

             window.open({news },'_blank')

（二） 参数接收   this.$route.query;     this.$route.params

      使用说明：接收到的 query是页面跳转时设置的 query：{参数1:参数1 } ；取参数 1  this.$route.query.参数1

                       接收到的 params是页面跳转时设置的 params：{参数1:参数1 } 

     实例: console.log(this.$route.query.id);

（三） 实战

定义跳转方法，调用跳转时调用

     showForm(index) {

                 // this.$router.replace({name: 'special_education', params: {id: index}})  //取代

                    this.$router.push({name:'special_education',query:{indexs:index}})  //追加

               // const news = this.$router.resolve({name:'special_education', query: {indexs: index}})

                // window.open(news.href,'_blank')  //新开页面

      }

定义接收方法，接收时调用

getParams() {

  // 取到路由带过来的参数

  this.mallCode =this.$route.query.indexs;

console.log(this.$route.query.indexs);

// 将数据放在当前组件的数据内

//this.mallInfo.searchMap.mallCode = routerParams;

//this.keyupMallName()

}