路由带参数
时间: 2023-07-27 20:18:53 浏览: 51
在 Vue 路由中,可以通过路由参数来传递数据。例如,我们可以通过路由参数来传递某个商品的 ID,然后在商品详情页中根据该 ID 显示对应的商品信息。
具体实现方法如下:
1. 在路由配置中定义带参数的路由:
```javascript
const router = new VueRouter({
routes: [
{
path: '/product/:id',
name: 'productDetail',
component: ProductDetail
}
]
})
```
在上述代码中,`:id` 表示路由参数,可以通过 `this.$route.params.id` 获取参数值。
2. 在组件中使用 `$route.params` 来获取路由参数:
```javascript
export default {
methods: {
goToProductDetail(productId) {
this.$router.push({ name: 'productDetail', params: { id: productId }})
}
}
}
```
以上代码中,`goToProductDetail` 方法调用 `$router.push` 方法来进行路由跳转,并传递了一个参数 `productId`。在路由对象中,使用 `name` 属性来指定路由名称,并通过 `params` 属性将参数传递给路由。
3. 在目标组件中通过 `$route.params` 获取路由参数:
```javascript
export default {
computed: {
productId() {
return this.$route.params.id
}
}
}
```
在上述代码中,`productId` 是一个计算属性,通过 `$route.params.id` 获取路由参数值。
通过上述步骤,我们就可以在 Vue 路由中传递和获取路由参数了。需要注意的是,路由参数可以是任意字符串,但是在路由路径中必须使用 `:` 前缀来表示参数。在组件中获取路由参数时,可以通过 `$route.params` 来获取参数对象。