VUE

您所在的位置：网站首页 › vue-router跳转和locationhref › VUE

VUE

2023-09-05 06:03| 来源: 网络整理| 查看: 265

vue-router传递参数主要有两种方式：

一.params: 1.基本使用配置路由格式：/details/:id传递的方式：a.在path后面拼接上对应的值，'/details/'+id b.对象中的params属性传递后在浏览器上形成的路径：/details/123在路由中配置参数则刷新页面参数不丢失，若不配置刷新页面参数丢失

注意：使用params传参时必须使用name引入路由，若用path则会忽略params中的数据、

2.如何传参与获取参数声明式导航普通跳转跳转时传递参数编程式导航普通跳转 // 字符串 this.$router.push('details') // 对象 this.$router.push({path:'details'}) this.$router.push({name:'details'}) 跳转时传递参数

用params传递参数时，只能用name来引入路由(如果提供了path,params会被忽略)

// 方式一： this.$router.push( { name:'details', params:{ id:1, name:'lily' } } ) // details/1/lily // 方式二： this.$router.push(`/details/${id}/${name}`) // details/1/lily this.$router.push( { path:'details', params:{} } ) // 这里的params不生效 /details

接受参数

注意：接受参数时是route,不是router

this.$route.params.id this.$route.params.name 2.query: 配置路由格式：/details (普通配置)传递的方式：使用对象中的query属性传递参数，{path:/details,query:{name:'lily',age:18}}传递后在浏览器上形成的路径：/details?name='lily'&age=18刷新页面参数不丢失声明式导航编程时导航，跳转时传递参数 this.$router.push( { // name:'details' path:'/details', query:{ id:1, name:'lily' } } ) // details?id=1&name=lily

接受参数

this.$route.query.id this.$route.query.name 总结： paramsquery配置

path:'/details/:id'

name:'details'

path:'/details'

name:'details'

传参{name:'details',params:{id:01}}{name:'details',query:{name:'lily'}}读参$route.params

$route.query

显示的url/details/01/details?name=lily刷新参数是否丢失

加参数配置/details/:id不丢失

普通配置/detail 会丢失

不丢失

【本文地址】

VUE

VUE

今日新闻

推荐新闻