Vue路由传参

Vue页面路由实现页面之间的跳转，我们还可以通过路由来进行参数之间的传递

• 第一种方式是通过 query 传参

//index.vue
<router-link :to="{ path: 'your router url', query: { name: 'your parameters' } }">link name</router-link>

//your link
<div>get parameters: {{ this.$route.query.name }}</div> 

• 第二种方式是通过 params 来传参

//index.vue
<router-link :to="{ path: 'your router url', params: { name: 'your parameters' } }">link name</router-link>

//your link
<div>get parameters: {{ this.$route.params.name }}</div> 

• 第三种方式通过 router/index.js 中的 name 属性去传参

// router/index.js 
{
    path: 'your router url',
    name: '😊your parameters',
    component: routerName
}

//your link
<div>get parameters: {{ this.$route.name }}</div> 

具体效果如下：

query 传参和 params 来传参的区别：

• params: params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined。
• query: 相当于get请求，这种传参方式相当于url拼接参数，页面跳转的时候，可以在地址栏看到请求参数。
• params: 相当于post请求，参数可以传递但是地址栏不会显示，刷新时会造成参数丢失。