vue router-link 页面跳转 传参 取参
时间: 2023-07-19 15:18:15 浏览: 119
浅析vue-router原理
好的,针对你的问题,我来简单回答一下。
在 Vue.js 中,我们使用 Vue Router 来进行路由管理和页面跳转。其中,`router-link` 是 Vue Router 提供的一个组件,用于生成页面内导航链接。
如果你需要在路由跳转时传递参数,可以使用 Vue Router 提供的路由参数传递功能。具体步骤如下:
1. 在定义路由时,可以通过 `props` 属性将参数传递给组件。例如:
```js
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
props: true
}
]
})
```
2. 在页面中使用 `router-link` 组件时,可以通过 `to` 属性指定跳转的路径,并通过 `:to` 绑定一个对象,该对象中包含要传递的参数。例如:
```html
<router-link :to="{ path: '/user', params: { id: 123 }}">User</router-link>
```
3. 在组件中通过 `this.$route.params` 可以获取到传递的参数。例如:
```js
export default {
props: {
id: {
required: true,
type: Number
}
},
created() {
console.log(this.$route.params.id) // 输出 123
}
}
```
当然,还有其他方式来传递参数,这里只是其中的一种。希望这个回答能够帮到你。
阅读全文