vue中routerlink怎么使用
时间: 2024-01-03 14:16:35 浏览: 165
Vue 列表页带参数进详情页的操作(router-link)
在Vue中,`router-link`用于创建一个链接到路由的元素。它会自动添加活动(或选中)类,以便在当前路由匹配时突出显示。
要使用`router-link`,首先需要在Vue组件中导入它:
```javascript
import { RouterLink } from 'vue-router'
```
然后,在模板中使用`router-link`标签,并通过`to`属性指定目标路由的路径:
```html
<router-link to="/path">Link Text</router-link>
```
这将创建一个带有`/path`路径的链接。
你也可以使用命名的路由,通过`name`属性指定目标路由的名称:
```html
<router-link :to="{ name: 'routeName' }">Link Text</router-link>
```
此外,你还可以添加其他属性,例如添加`exact`属性以确保只有在精确匹配时才激活链接:
```html
<router-link to="/path" exact>Link Text</router-link>
```
当然,在使用`router-link`之前,你需要先安装并配置Vue Router。
阅读全文