vue侧边栏导航选中动画效果

可以使用vue-router的导航守卫来实现侧边栏导航选中动画效果。具体实现步骤如下：

1. 在侧边栏导航组件中，使用vue-router的router-link组件来创建导航链接，并设置active-class属性为'active'，如下所示：

<router-link to="/home" active-class="active">Home</router-link>
<router-link to="/about" active-class="active">About</router-link>
<router-link to="/contact" active-class="active">Contact</router-link>

2. 在样式文件中，定义.active类的样式，用于显示选中状态，如下所示：

.active {
  background-color: #ccc;
  color: #fff;
}

3. 在路由配置文件中，使用beforeEach导航守卫来监听路由变化，在路由变化时根据当前路由的路径动态添加或删除.active类，如下所示：

router.beforeEach((to, from, next) => {
  // 获取侧边栏导航元素
  const navbar = document.getElementById('navbar');
  // 获取当前路由路径
  const path = to.path;
  // 遍历侧边栏导航元素，判断是否选中
  navbar.querySelectorAll('.nav-item').forEach(item => {
    if (item.getAttribute('href') === path) {
      // 添加.active类
      item.classList.add('active');
    } else {
      // 删除.active类
      item.classList.remove('active');
    }
  });
  next();
});

注意：在使用导航守卫时，需要将路由配置文件导出为一个变量，以便在vue实例中使用。例如：

export const router = new VueRouter({
  routes: [...],
});

router.beforeEach((to, from, next) => {
  // ...
});

new Vue({
  router,
  // ...
});