router-link刷新时选中
时间: 2023-07-19 10:42:42 浏览: 88
当使用 `router-link` 组件进行路由跳转时,如果刷新页面后需要保持当前路由链接的选中状态,可以使用 `router-link-active` 指令。
`router-link-active` 指令可以用来给某个元素绑定一个或多个 CSS 类名,当当前路由匹配到指定的路由时,该元素会自动添加这些 CSS 类名。
例如,你可以将 `router-link-active` 指令应用于 `<li>` 标签,然后指定一个 CSS 类名 "active",这样当路由匹配到该链接时,该元素就会自动添加 "active" 类名,从而实现选中效果。
```html
<ul>
<li v-router-link="{ path: '/', exact: true }" router-link-active="active">首页</li>
<li v-router-link="{ path: '/about' }" router-link-active="active">关于我们</li>
<li v-router-link="{ path: '/contact' }" router-link-active="active">联系我们</li>
</ul>
```
在上面的示例中,我们使用 `v-router-link` 指令来生成路由链接,然后将 `router-link-active` 指令应用于每个 `<li>` 标签,并指定 "active" 类名。这样,在刷新页面后,如果当前路由匹配到某个链接,该链接所在的元素就会自动添加 "active" 类名,从而实现选中效果。
注意,`router-link-active` 指令可以应用于任何元素,不一定是 `<li>` 标签。另外,如果需要同时指定多个 CSS 类名,可以用数组来传递。例如:
```html
<li v-router-link="{ path: '/', exact: true }" router-link-active="[ 'active', 'bold' ]">首页</li>
```
这样,当路由匹配到该链接时,该元素就会同时添加 "active" 和 "bold" 两个类名。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)