vue路由传参

qq_50949240

已于 2024-11-05 13:45:28 修改

阅读量377

点赞数 3

文章标签： vue.js javascript 前端

于 2024-08-30 14:59:03 首次发布

本文链接：https://blog.csdn.net/qq_50949240/article/details/141718346

版权

{
    path:"/routeTest",
    component:()=>import("@/views/routeTest/routeParams.vue"),
    hidden: true,
    meta:{
      title:"路由元信息"
    },
    children:[
      {
        path:"",                     --->url：/routeTest
        name:"origin",
        component:()=>import("@/views/routeTest/children/home.vue"),
        props:true,
      },
      {
        path:"/query",              --->url：/query
        name:"query",
        component:()=>import("@/views/routeTest/children/query.vue"),
      },
      {
        path:"param/:name?/:age?",    -->url：/routeTest/param
        name:"param",
        component:()=>import("@/views/routeTest/children/param.vue"),
      },

    ]
  }

一、params传参

①可用于动态路由

②参数后加上？表示可传可不传

1.显示在路径中，刷新依旧存在

{
        path:"param/:name?/:age?",
        name:"param",
        component:()=>import("@/views/routeTest/children/param.vue"),
        meta:{
          title:"param传参"
        },
        
},



调用：
1.this.$route.push({
    name:"param",     //param的编程式导航，必须用name别名
    param:{
        age:"22",
        name:"xy"
    }
})

2.this.$route.push("/param/xy/22")


结果：/param/xy/22

2.不显示在路径中，刷新后，数据消失

{
        path:"param",
        name:"param",
        component:()=>import("@/views/routeTest/children/param.vue"),
        meta:{
          title:"param传参"
        },
        
},

调用：
1.this.$route.push({
    name:"param",     //param的编程式导航，必须用name别名
    param:{
        age:"22",
        name:"xy"
    }
})


//这种方式就不能用了，因为参数中未定义，找不到对应的
2.this.$route.push("/param/xy/22")  


url结果：/param

二、query传参

直接用编程式导航或者声明式导航传递参数，路由声明中不用定义。

{
        path:"/query",
        name:"query",//编程式传参必须有别名
        component:()=>import("@/views/routeTest/children/query.vue"),
        meta:{
          title:"query传参"
        },
},

调用
1.this.$route.push({
    name:"query",      //query这种写法也可以用path:   path:"/query"
    query:{
        name:"xy",
        age:20,
    }
})

2.this.$route.push("/query?name=xy&age=20")


结果
url显示：/query?name=xy&age=20

三、声明式导航写法

1.<route-link :to={path:url,query:{}}></route-link>
2.<route-link :to={path:url,params:{}}></route-link>
3.<route-link :to="/url?key=keyValue"></route-link>
4.<route-link :to="/url/key:keyValue"></route-link>