美文网首页
vue 跳转(跳转接收参数)问题总结

vue 跳转(跳转接收参数)问题总结

作者: 醉青风 | 来源:发表于2020-02-19 11:17 被阅读0次

    (一) 转新页面

        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()

    }

    相关文章

      网友评论

          本文标题:vue 跳转(跳转接收参数)问题总结

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