router-link 携带数据
时间: 2023-09-13 12:08:23 浏览: 49
可以通过在 router-link 中使用 to 属性及 query 或 params 属性来携带数据。当使用 query 参数时,数据会以键值对的形式附加到 URL 中;当使用 params 参数时,数据会以占位符的形式嵌入到 URL 中。以下是示例代码:
```
<!-- 使用 query 参数携带数据 -->
<router-link :to="{path: '/example', query: {data: 'example data'}}">Go to example page</router-link>
<!-- 使用 params 参数携带数据 -->
<router-link :to="{name: 'example', params: {data: 'example data'}}">Go to example page</router-link>
```
在目标路由组件中,可以通过 $route 对象的 query 或 params 属性来获取相应的数据。例如:
```
export default {
mounted() {
// 获取使用 query 参数携带的数据
const data = this.$route.query.data;
console.log(data); // 输出 "example data"
// 获取使用 params 参数携带的数据
const data = this.$route.params.data;
console.log(data); // 输出 "example data"
}
}
```
请注意,使用 params 参数携带数据时需要在路由配置中声明相应的占位符。例如:
```
const routes = [
{
path: '/example/:data', // 声明占位符 :data
name: 'example',
component: ExampleComponent
}
]
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)