vue一个页面里对字段进行route-link
时间: 2023-07-01 20:07:49 浏览: 52
如果你想在 Vue 页面中使用 `route-link` 对某个字段进行链接,可以使用以下方式:
首先,在 `router.js` 中定义路由:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import YourComponent from '@/components/YourComponent.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/your-path/:field',
name: 'YourComponent',
component: YourComponent
}
]
})
```
这里的 `:field` 是一个参数,表示你要传递的字段。
在你的组件中,使用 `route-link` 来链接到该字段:
```html
<template>
<div>
<ul>
<li v-for="item in yourList" :key="item.id">
<router-link :to="{ name: 'YourComponent', params: { field: item.field } }">{{ item.field }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'YourComponent',
data() {
return {
yourList: [
{ id: 1, field: 'field1' },
{ id: 2, field: 'field2' },
{ id: 3, field: 'field3' }
]
}
}
}
</script>
```
在这里,我们使用 `v-for` 循环渲染列表,并将每个列表项中的字段作为参数传递给路由。
注意,在 `router-link` 中,我们使用 `name` 属性指定要链接到的组件,`params` 属性指定要传递的参数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)