我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同 vue-router@4。
编程式路由传参
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
1. 通过 params 传递
路由配置
路径参数 用冒号 : 表示。
const routes = [ // 动态段以冒号开始 { path: 'details/:id', name: "details", component: Details },]
复制代码
router.push() 方法的参数可以是一个字符串路径，或者一个描述地址的对象。
const Home = { template: '<div @click="toDetails">To Details</div>', metheds: { toDetails() { // 字符串路径 this.$router.push('/details/001') // 带有路径的对象 this.$router.push({path: '/details/001'}) // 命名路由，路由配置时，需要 name 字段 this.$router.push({ name: 'details', params: { id: '001' } }) } }}
复制代码
注意，如果提供了 path，params 会被忽略：
// `params` 不能与 `path` 一起使用router.push({ path: '/details', params: { id: '001' } }) // -> /details
复制代码
组件获取数据
当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。
const Details = { template: '<div>Details {{ $route.params.id }} </div>', created() { // 监听路由变化 this.$watch( () => this.$route.params, (toParams, previousParams) => { // 对路由变化做出响应... } ) },}
复制代码
2. 通过 query 传递
这种情况下 query （查询参数）传递的参数会显示在 url 后面，如：/details/001?kind=car。
路由配置
使用 query 时，以下三种方式都是可行的：
this.$router.push('/details/001?kind=car')
复制代码
this.$router.push({ path: '/details/001', query: { kind: "car" }})
复制代码
this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})
复制代码
组件获取数据
组件通过 $route.query 获取：
const Details = { template: '<div>Details {{ $route.query.kind }} </div>', created() { // 监听路由变化 this.$watch( () => this.$route.query, (toParams, previousParams) => { // 对路由变化做出响应... } ) },}
复制代码
要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.query 。
3. 通过 hash 传递
通过此方式，url 路径中带有 hash，例如：/details/001#car。
路由配置
使用 hash 时，以下三种方式都是可行的（同 query）：
this.$router.push('/details/001#car')
复制代码
this.$router.push({ path: '/details/001', hash: '#car'})
复制代码
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})
复制代码
组件获取数据
组件通过 $route.hash.slice(1) 获取：
const Details = { template: '<div>Details {{ $route.hash.slice(1) }} </div>',}
复制代码
通过 props 进行传递
在组件中使用 $route 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，前端培训但我们可以通过 props 配置来解除这种行为。
以解耦的方式使用 props 进行参数传递，主要是在路由配置中进行操作。
1. 布尔模式
当 props 设置为 true 时，route.params 将被设置为组件的 props。
例如下面的代码是通过 $route 的方式获取动态字段 id：
const User = { template: '<div>User {{ $route.params.id }}</div>'}const routes = [{ path: '/user/:id', component: User }]
复制代码
将上面的代码替换成 props 的形式，如下：
const User = { props: ['id'], // 组件中通过 props 获取 id template: '<div>User {{ id }}</div>'}// 路由配置中，增加 props 字段，并将值 设置为 trueconst routes = [{ path: '/user/:id', component: User, props: true }]
复制代码
注意：对于有命名视图的路由，你必须为每个命名视图定义 props 配置：
const routes = [ { path: '/user/:id', components: { default: User, sidebar: Sidebar }, // 为 User 提供 props props: { default: true, sidebar: false } }]
复制代码
2. 对象模式
当 props 是一个对象时，它将原样设置为组件 props。当 props 是静态的时候很有用。
路由配置
const routes = [ { path: '/hello', component: Hello, props: { name: 'World' } }]
复制代码
组件中获取数据
const Hello = { props: { name: { type: String, default: 'Vue' } }, template: '<div> Hello {{ name }}</div>'}
复制代码
<Hello /> 组件默认显示 Hello Vue，但路由配置了 props 对象，当路由跳转到 /hello 时，会显示传递过来的 name， 页面会显示为 Hello World。
3. 函数模式
可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。
路由配置
使用函数模式时，返回 props 的函数接受的参数为路由记录 route。
// 创建一个返回 props 的函数const dynamicPropsFn = (route) => { return { name: route.query.say + "!" }}const routes = [ { path: '/hello', component: Hello, props: dynamicPropsFn }]
复制代码
组件获取数据
当 URL 为 /hello?say=World 时， 将传递 {name: 'World!'} 作为 props 传给 Hello 组件。
const Hello = { props: { name: { type: String, default: 'Vue' } }, template: '<div> Hello {{ name }}</div>'}
复制代码
此时页面将渲染：
注意：请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 vue 才可以对状态变化做出反应。
其他方式
1. 通过 Vuex 进行传递
1. store 存储状态； 2. A 组件更改 store 中的状态； 3. B 组件从 store 中获取。
复制代码
2. 通过前端本地存储等方式
1. Local Storage; 2. Session Storage; 3. IndexedDB; 4. Web SQL; 5. Cookies。
复制代码
评论