vue-router的3种传参方式

一、$route.name 传参

   在App.vue中直接写 {{ $route.name }} ,如下图

vue-router的3种传参方式_第1张图片
App.vue代码

   效果如下图
vue-router的3种传参方式_第2张图片
效果

二、router-link 传参

   · router-link原本的写法:

vue-router的3种传参方式_第3张图片
App.vue代码

   · 传参写法:

vue-router的3种传参方式_第4张图片
App.vue代码

vue-router的3种传参方式_第5张图片
wave.vue代码

vue-router的3种传参方式_第6张图片
效果

   多个参数写法:
多个参数

三、url 传参

vue-router的3种传参方式_第7张图片
index.js代码

vue-router的3种传参方式_第8张图片
App.vue代码

vue-router的3种传参方式_第9张图片
wave.vue代码

vue-router的3种传参方式_第10张图片
效果

你可能感兴趣的:(vue-router的3种传参方式)