router-link打开页面时没有选中

当使用 `router-link` 组件进行路由跳转时，如果打开页面时没有选中当前路由链接，可能是因为路由还没有完成初始化。

一种解决方法是在路由初始化完成后，手动设置当前路由链接的选中状态。可以使用 `activated` 生命周期钩子来实现这一点。

在路由组件中，将 `activated` 钩子定义为一个方法，然后在方法中手动设置当前路由链接的选中状态。例如：

<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 更新后再进行操作。可以使用如下代码：

activated() {
  this.$nextTick(() => {
    // 在这里设置选中状态
  });
}

这样就可以确保在 `activated` 钩子中设置选中状态时，DOM 已经完成了更新。