路由跳转的方式

声明式跳转：通过 <router-link> 标签来跳转

使用 <router-link> 标签来进行跳转， <router-link> 标签最终会被渲染成 a 标签

<router-link  to="/user">用户</router-link>

编程式跳转：用 js 代码来进行跳转

使用全局的 router 对象来跳转

this.$router.push("/user")

路由传参的方式

不论是声明式跳转还是编程式跳转，都可以传参。

使用 query 传参

query 本质就是在路径后面拼接字符串，所以使用 query 的方式来传参最终都会转化成拼接字符串格式并在地址栏路径上显示。

参数的传递

使用 query 传参有三种方式：

1. 直接拼接字符串传参

<!-- 导航式跳转 -->
<router-link to="/user?name=kobe">用户</router-link>

// 声明式跳转
this.$router.push('/user?name=kobe')

2. 通过路径跳转路由传参

<!-- 导航式跳转 -->
<router-link :to="{ path: '/user', query: { name: 'kobe' } }">用户</router-link>

// 声明式跳转
this.$router.push({ path: '/user', query: { name: 'kobe' } })

3. 通过命名路由跳转传参

<!-- 导航式跳转 -->
<router-link :to="{ name: 'user', query: { name: 'kobe' } }">用户</router-link>

// 声明式跳转
this.$router.push({ name: 'user', query: { name: 'kobe' } })

参数的接收

在组件中通过 $route 来获取到当前组件的路由对象，在这个路由对象中可以获取到传递过来的参数（不管是 query 方式传参 还是 params 方式传参）。

通过 $route.query 来获取到当前组件的参数对象

使用 params 传参

参数的传递

使用 params 传参就只能使用 命名路由 的方式来跳转，使用路径跳转的话参数会被忽略，无法传递过去。

<!-- 导航式跳转 -->
<router-link :to="{ name: 'user', params: { name: 'kobe' } }">用户</router-link>

// 声明式跳转
this.$router.push({ name: 'user', params: { name: 'kobe' } })

参数的接收

通过 $route.params 来获取到当前组件的参数对象

使用路径跳转的方式传参后，获取的路由对象如下，params 对象为空，并没有获取到传递过来的参数。

注意点

在使用 params 传参后，如果刷新页面，参数的数据会丢失，而 query 传参则不会。

刷新页面后重新获取的路由对象如下，此时params 对象为空，所以如果是使用params 来传参要考虑参数的持久化处理。

小结

1. 使用路径(path)跳转时，必须使用 query 来传参；
2. 使用命名路由(name)的方式跳转 query 和 params 都可以用来传参；

通过动态路由来传参

动态路由一般用来匹配同一路由规则下的不同路径，我们也可以获取到它的路径参数。

参数的传递

参数的接收

动态路由的路径参数会被传递给路由对象的 params 对象，因此可以通过$route.params 来获取。

通过 props 进行传递

在设置路由规则时可以将 props 设置为 true，$route.params 将会被设置为组件属性。也就是说如果通过 params 来传参的话，可以设置路由的 props，就可以直接在组件中通过 props 属性来获取到数据