路由传参

引言

我们的地址一般都是带参数的，比如：

image.png

这就涉及到路由传参问题
一般来说，路由传参有以下几种方式：

• 通过设置path
• 通过name
• 通过<router-link> 标签中的to传参

一：通过设置path值

传递一个参数

1. 回到苹果的路由设置页（Router下的index.js页），给苹果的path添加/:color，这样就能在地址栏传递参数了，比如传递red，green
   image.png

2. 在apple.vue页面中添加内容如下：

   
   获取参数值.png

3. 访问地址栏我们可以看到：

   
   路由传参.gif
4. 注意一个问题：在演示中，当地址为http://localhost:8080/#/apple时，是不出现东西的。我们必须给他传递参数，才会出来正确的页面

传递任意个参数
除了能传递一个参数外，也可以传递好几个参数，比入：传入俩参数

1. 将Router下的index.js页改为：

   
   image.png

2. apple.vue改为获取两个参数

   
   获取参数.png

3. 地址栏只需改为：

   
   地址.png

二：通过name传递

这里的name就是index.js里配置路由的name

image.png

在App.vue中，添加获取name的方法

image.png
但是，这种方法很奇怪，而且不实用

三：通过<router-link> 标签中的to传参

基本语法：
<router-link :to="{name:xxx,params:{key:value}}">[名称]</router-link>

• to前面带：
• params就是传递的参数，对象形式，可以传递多个值

新增葡萄页面，内容与苹果相似

to传值.png