验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

vue跳转页签传参并查询参数的方法是什么

阅读:319 来源:乙速云 作者:代码code

vue跳转页签传参并查询参数的方法是什么

场景

需求是要求通过点击用户ID或者昵称 跳转用户管理页面并查询该用户

实现效果如图

vue跳转页签传参并查询参数的方法是什么

实现方法开始

在A页面也就是笔记列表页签为父级 代码如下 


 

        
          
               {{scope.row.userId}}
           
          
        


多场景vue跳转方法 

// 字符串
 to apple
// 对象
 to apple
// 命名路由
 to apple
//直接路由带查询参数query,地址栏变成 /apple?color=red
 to apple
// 命名路由带查询参数query,地址栏变成/apple?color=red
 to apple
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
 to apple
// 命名路由带路由参数params,地址栏是/apple/red
 to apple
// 其他方式

  {{ scope.row.userId }}

方法比较多 这里我使用了

动态赋值动态传参to里的值可以是一个字符串路径,或者一个描述地址的对象

// 命名路由带路由参数params,地址栏是/apple/red
 to apple

 给不知道name参数从哪来的 提个醒 这个name里的参数的 子级页面的name 也就是你需要跳转的那个页面 也就是路由跳转

vue跳转页签传参并查询参数的方法是什么

 接收方法如下

export default {
  name: "User",
  components: { Treeselect },
  data() {
  return {}
 created() {
  //每次切换页面重新进入次方法 此方法只用于页面传参根据userid查询用户
  activated () {undefined
      const userId = this.$route.params && this.$route.params.userId;
        //userid是否为空
      if (userId) {
            this.loading = true;
            //赋予userid queryParams查询传入查询的字段  this.$route.params.userId接收的字段参数
            this.queryParams.userId = this.$route.params.userId;
            //我自己的搜索方法
            this.handleQuery();
        }
  },
  methods: {
}
}

获取参数方式:this.$route.params.userId

这个userId就是{name: 'User', params: { userId: scope.row.userId }} 里params下的userId

分享到:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>