vue-router四种参数传递

目录

    • 1.用name传参
    • 2.通过标签中的to传参
    • 3.利用url传参
    • 4.编程式导航中获取参数

1.用name传参

vue-router四种参数传递_第1张图片
vue-router四种参数传递_第2张图片
vue-router四种参数传递_第3张图片

2.通过标签中的to传参

index.js中name的值为hello2
vue-router四种参数传递_第4张图片
index.vue页面
vue-router四种参数传递_第5张图片

vue-router四种参数传递_第6张图片
从index中点击:
vue-router四种参数传递_第7张图片

3.利用url传参

vue-router四种参数传递_第8张图片
vue-router四种参数传递_第9张图片
vue-router四种参数传递_第10张图片
点击去往:
vue-router四种参数传递_第11张图片
此时,如果不传参,页面将无法访问
vue-router四种参数传递_第12张图片

4.编程式导航中获取参数

去往hi页面的name为hi
vue-router四种参数传递_第13张图片
this.$router.push({name:“hi”, params:{id:123}})
vue-router四种参数传递_第14张图片
接收:

vue-router四种参数传递_第15张图片
运行:
vue-router四种参数传递_第16张图片
vue-router四种参数传递_第17张图片
var id=this.$route.params.id

你可能感兴趣的:(vue,vue)