vue-router传参的四种方式
1.router-link1.不带参数<router-link :to="{name:'home'}"<router-link :to="{path:'/home'}"//router-link中链接如果是'/'开始就是从跟路由开始,如果开始不带'/',则从当前路由开始2.带参数<router-link :to="{name:'home',params:{id:1}}">/
·
1.router-link
1.不带参数
<router-link :to="{name:'home'}" />
<router-link :to="{path:'/home'}" />
//router-link中链接如果是'/'开始就是从跟路由开始,如果开始不带'/',则从当前路由开始
2.带参数
<router-link :to="{name:'home',params:{id:1}}" />
//params传参数(类似post)
//路由里面配置path:"/home/:id" 或者 path:"/home:id"
//冒号用params取参,用"/:"拼接
//不配置path,刷新页面id会保留
//html取参 $route.params.id
//script 取参 this.$route.params.id
//params是path的一部分,所以params和name一起使用,不能和path一起使用
<router-link :to="{name:'home',query:{id:1}}" /> 或者
<router-link :to="{path:'home',query:{id:1}}" />
//query传参数(类似get,url后面会显示参数)
//路由可不配置 因为带参数了
//html 取参 $route.query.id
// script 取参 this.$route.query.id
2.this.$router.push() 在函数里调用
1.不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2.带参数(query传参和params传参以及两者区别)
//query传参 三种写法
第一种:this.$router.push({name:'home',query:{id:1,age:2}})
//基于name配置路由
{
path: '/hhhhhhh', //这里可以任意
name: 'home', //这里必须是home
component: Home
}
http://localhost:8080/#/hhhhhhh?id=1&age=2
第二种:this.$router.push({path:'/home',query:{id:1,age:2}})
//基于path配置路由
{
path: '/home', //这里必须是home
name: 'hhhhhhhh', //这里任意
component: Home
}
url:http://localhost:8080/#/home?id=1234&age=12
第三种:this.$router.push(`/home?id=1`);
//query是name和path都可以用
//html取参 $route.query.id
//script 取参 this.$route.query.id
//params传参
this.$router.push({name:'home',params:{id:1,age:2}}) //params只能和name一起用哟
//路由配置:
{
path:'/home/:id/:age',
name:'W',
component:W
}
//路由配置path:"/home/:id" 或者path:"/home:id",
//不配置path,第一次可以请求实现跳转,也能通过this.$router.params.id获取传过来的值,但是刷新页面id会消失 params比query严格
//配置path,刷新页面id会保留
//html 取参 $route.params.id
//script 取参 this.$router.params.id
query和params的区别
query类似get,跳转之后页面url后面会拼接参数,类似?id=1,非重要性可以这样传,密码之类用params
params类似post,跳转之后页面url后面不会拼接参数,但是刷新页面id会消失
3.this.$router.replace() (用法同上,push)
4.this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
区别:
- this.$router.push
跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回上一个页面 - this.$router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面(就是直接替换了当前页面) - this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
自己又总结了一些,方便后续查找,做个笔记
文章来源于:https://blog.csdn.net/Leon_940002463/article/details/102696495?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
更多推荐
已为社区贡献3条内容
所有评论(0)