路由传参

路由传参

两种方式

query

params

1.直接在router-link to 属性中拼接 ?id=3 参数直接进query

 <router-link to="/pzj?id=5" tag="div">彭忠杰</router-link>

2.在path里拼接 /:key/:id 参数进入params

 <router-link to="/myl/3/25">马跃磊</router-link>
 
 
   {
    path: "/myl/:id/:key",
    component: myl
    },

1.router 跳转路由

2.route 路由参数

3.routes 配置路由规则

  <button @click="jump('/msy')">点击</button>
  

如果想在事件中跳转路由 携带参数 路由规则中需要添加name属性

path中跳转地址 依然要符合路由设定的规则

<button @click="jump('/msy')">点击</button>


  {
       path: "/msy",
       component: msy,
       name:"msy"
  }
  
  
  
  jump(e){
                this.$router.push({
                    name:"msy",
                    // path:e,  //可以省略 
                    query:{
                        // 直接拼接在地址栏中
                        id:3,
                        name:"马士洋"
                    },
                    params:{
                        // 相当于临时存储参数 刷新页面清空
                        id:3,
                        name:"马士洋"
                    }
                })
            }