router-link 携带数据
时间: 2023-09-13 21:08:23 浏览: 52
可以通过在 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
}
]
```