前端面试——Vue篇（路由传参的几种方式）

一、先说声明式<router-link></router-link>

1.不带参数

name和path都可以。

<router-link :to={name:‘/home’}
<router-link :to={path:‘/home’}

此时this.$route里有query和params都是空值。

2.带参数

<router-link :to="{ name:'guanyu',params:{id:'1'}}">携带参数(params)</router-link>

params携带参数类似于post方法，只有path里面配置参数，刷新页面参数才会保留。

<router-link :to="{name: 'guanyu',query: {id: '2'}}">携带参数(query)</router-link>

query携带参数类似于get方法，url后面会显示参数，path里不需要配置参数。

二、再说编程式this.$router.push()

 1.普通的路由跳转不携带参数

（1）this.$router.push（‘/home’）
（2）this.$router.push（{path:‘/home’}）
（3）this.$router.push（{name:‘/home’}）

2.带参数

2.1query传参

（1）this.$router.push（{path:‘/home’,query:{id:‘1’}）
（2）this.$router.push（{name:‘/home’,query:{id:‘1’}）

2.2params传参

（1）this.$router.push（{name:‘/home’,query:{id:‘1’}）