vue router怎么跳转后怎么获取参数

Posted 2023-04-25

首先在app.vue里面有这么一段 然后你所点击的按钮其实是这个东西，这个其实就是个封装完的a标签 你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了 参考技术A 可通过$route对象获取params参数对象

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

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

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

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

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

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

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

  使用说明： 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')

      使用说明：接收到的  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()