Vue中路由传参的几种形式

笔记一

• 传参链接

    <router-link to="/home/message/detail/12?title=张三">detail</router-link>
    //12  为params 参数传递形式
    //title  为query 参数传递形式
  

• 路由形式

    path:'detail/:id',    //params形式,params传递的参数为12
    // path:'detail',     //默认形式,query传参用的是这种形式
      component:Detail,
    // 方式一   布尔值                    
    // props:true,//将所有的params参数直接映射到props中
        //注意:这种方式只能是params传参,并且在路由接收的时候需要声明 props["id"]  来接收传递的参数值
    // 方式二 对象
    // props:{id:11,name:"张三11"}
        //注意:这种方式是自定义传参,传递的参数为死数据,并且在路由接收的时候需要声明 props["id","name"]  来接收传递的参数值
    // 方式三
    props: route => ({
      id:route.params.id,
      title:route.query.title,
      name:"自定义的值"
    })
        //注意:这种方式可以是query,也可以是params传参,并且在路由接收的时候需要声明 props["id","name"]  来接收传递的参数值
  

• 路由接收数据

    一.this.$route  来接收
    二.props:["id","name"]
      具体视情况而定
  

笔记二

• query传参形式

    请求:  this.$router.push("/search?keywords="+this.keywords)
    路由:  {
            path:'/search',
            component:Search
          },
    接收:  $route.query.keywords
  

• params参数形式

    请求:  this.$router.push(`/search/${this.keywords}`)
    路由:  {
            path:'/search/:keywords',
            component:Search,
            name:"search"
          },
    接收:  {{$route.params.keywords}}
  

• 综合

    请求:  this.$router.push({
                name:"search",
                query:{keywords:this.keywords},
                params:{keywords:this.keywords.toUpperCase()}
            })
    路由:
          {
              path:'/search/:keywords',
              component:Search,
              name:"search"
          },
    接收:
          query{{$route.query.keywords}}
          params{{$route.params.keywords}}