router-link打开页面时没有选中
时间: 2023-07-20 22:46:24 浏览: 225
当使用 `router-link` 组件进行路由跳转时,如果打开页面时没有选中当前路由链接,可能是因为路由还没有完成初始化。
一种解决方法是在路由初始化完成后,手动设置当前路由链接的选中状态。可以使用 `activated` 生命周期钩子来实现这一点。
在路由组件中,将 `activated` 钩子定义为一个方法,然后在方法中手动设置当前路由链接的选中状态。例如:
```html
<template>
<div>
<router-link to="/" ref="homeLink">首页</router-link>
<router-link to="/about" ref="aboutLink">关于我们</router-link>
<router-link to="/contact" ref="contactLink">联系我们</router-link>
</div>
</template>
<script>
export default {
activated() {
if (this.$route.path === '/') {
this.$refs.homeLink.classList.add('active');
} else if (this.$route.path === '/about') {
this.$refs.aboutLink.classList.add('active');
} else if (this.$route.path === '/contact') {
this.$refs.contactLink.classList.add('active');
}
}
}
</script>
```
在上面的示例中,我们在 `activated` 钩子中判断当前路由路径,然后手动设置相应的路由链接的选中状态。我们使用 `ref` 属性给每个路由链接指定一个引用,然后在 `activated` 钩子中使用 `$refs` 引用访问这些元素,并给它们添加 "active" 类名。
需要注意的是,在 `activated` 钩子中设置选中状态时,需要使用 `$nextTick` 方法来确保 DOM 已经更新完毕。这是因为 `activated` 钩子在路由组件被激活时会被调用,此时可能还没有完成 DOM 更新。因此,我们需要等待下一次 DOM 更新后再进行操作。可以使用如下代码:
```javascript
activated() {
this.$nextTick(() => {
// 在这里设置选中状态
});
}
```
这样就可以确保在 `activated` 钩子中设置选中状态时,DOM 已经完成了更新。
相关推荐
![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://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.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)