若依项目中 路由跳转 加 传递参数
时间: 2023-11-16 21:39:45 浏览: 87
若依项目中,可以在路由跳转时通过路由参数传递数据。下面是一个示例:
1. 在路由配置中添加参数:
```javascript
const router = new VueRouter({
routes: [
{
path: '/user/:id',
name: 'User',
component: User
}
]
})
```
在上面的示例中,`:id`表示参数部分,可以在跳转时动态传递不同的值。
2. 在组件中获取参数:
```html
<template>
<div>
<router-link :to="'/user/' + userId">User</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
userId: 123
}
}
}
</script>
```
在上面的示例中,使用`:to`绑定了一个动态的路径,其中`userId`是一个变量。可以根据需要将不同的值赋给`userId`。
3. 在目标组件中接收参数:
```html
<template>
<div>
User ID: {{ $route.params.id }}
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$route.params.id);
}
}
</script>
```
在上面的示例中,通过`$route.params.id`可以获取到传递过来的参数值。
通过以上步骤,就可以在若依项目中实现路由跳转并传递参数。