共计 3901 个字符，预计需要花费 10 分钟才能阅读完成。
咱们在开发单页面利用时，有时须要进入某个路由后基于参数从服务器获取数据，那么咱们首先要获取路由传递过去的参数，从而实现服务器申请，所以，咱们须要理解路由传参的几种形式，以下形式同 vue-router@4。
编程式路由传参
除了应用 <router-link> 创立 a 标签来定义导航链接，咱们还能够借助 router 的实例办法，通过编写代码来实现。
通过 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 进行参数传递，次要是在路由配置中进行操作。
- 布尔模式
当 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 字段，并将值 设置为 true
const 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}
}
]- 对象模式
- 当 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。
- 函数模式
能够创立一个返回 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 才能够对状态变动做出反馈。
其余形式
- 通过 Vuex 进行传递
1. store 存储状态；
2. A 组件更改 store 中的状态；
3. B 组件从 store 中获取。
- 通过前端本地存储等形式
1. Local Storage;
2. Session Storage;
3. IndexedDB;
4. Web SQL;
5. Cookies。
