Vue.js中如何点击router-link为对应marker元素添加active类

直接利用Vue Router内置的路由状态判断即可，不需要额外绑定点击事件：
用全局路由对象$route的name属性，和每个marker对应的路由名称做匹配，动态绑定active类。

修改后的Pug代码如下：

.navigation
ul
  li
    router-link(:to="{ name: 'tasks'}") Tasks
  li
    router-link(:to="{ name: 'kanban'}") Kanban
  li
    router-link(:to="{ name: 'activity'}") Activity
  li
    router-link(:to="{ name: 'calendar'}") Calendar
  li
    router-link(:to="{ name: 'files'}") Files
  .marker
  .selecttasks(:class="{ active: $route.name === 'tasks' }")
    span
  .selectkanban(:class="{ active: $route.name === 'kanban' }")
    span
  .selectactivity(:class="{ active: $route.name === 'activity' }")
    span.third-marker( )
  .selectcalendar(:class="{ active: $route.name === 'calendar' }")
    span.fourth-marker( )
  .selectfiles(:class="{ active: $route.name === 'files' }")
    span

如果是Vue3 + <script setup>的写法，先在脚本中引入路由实例：

import { useRoute } from 'vue-router'
const route = useRoute()

再把模板中所有的$route替换为route即可。

注意：需要保证路由表中定义的各路由name值和这里匹配的字符串完全一致，大小写不要出错。

内容的提问来源于stack exchange，提问作者Victor Zhvanetskiy