vue-admin 路由传参
时间: 2023-09-06 22:01:46 浏览: 131
学习vue-admin-template,优化了大量融入代码,添加中文注释
在Vue.js中,使用vue-router进行路由传参可以通过以下几种方式实现。
1. 通过路由参数传递:可以在定义路由时,使用动态路由来传递参数。例如:
```javascript
{
path: '/user/:id',
component: User,
props: true
}
```
然后在组件中,通过props属性来使用传递的参数:
```javascript
props: ['id']
```
2. 通过query传递参数:可以使用to属性或者router-link组件来传递query参数。例如:
```html
<router-link :to="{ path: '/user', query: { id: 1 }}">
User
</router-link>
```
然后在组件中,可以通过this.$route.query来获取传递的参数:
```javascript
this.$route.query.id
```
3. 使用命名路由传递参数:可以给路由定义一个name,在使用router-link时传递参数。例如:
```javascript
{
path: '/user',
name: 'user',
component: User
}
```
然后在组件中,使用name属性和params属性来传递参数:
```html
<router-link :to="{ name: 'user', params: { id: 1 }}">
User
</router-link>
```
然后在组件中,可以通过this.$route.params来获取传递的参数:
```javascript
this.$route.params.id
```
通过以上几种方式,可以在vue-admin中实现路由传参,根据具体的业务需求选择合适的方式进行传参。
阅读全文