点击vue路由跳转隐藏_vue路由跳转并显示高亮

点击vue路由跳转隐藏和显示高亮是在网页开发中常见的需求之一。在Vue.js中，我们可以通过使用路由来实现这个功能。

我们需要使用Vue Router来设置路由。Vue Router是Vue.js官方的路由管理器，可以实现单页面应用的路由功能。我们可以在Vue项目中安装和引入Vue Router，并配置路由表。

在路由表中，我们可以设置每个路由对应的组件，并为每个路由添加一个路径。当用户点击某个路由链接时，Vue Router会根据路径找到对应的组件，并将其渲染到页面上。

接下来，我们可以使用Vue Router提供的router-link组件来创建路由链接。router-link组件会渲染成一个带有正确路径的a标签，点击该链接时会触发路由跳转。

为了实现点击路由跳转时隐藏和显示高亮的效果，我们可以使用Vue Router提供的导航守卫。导航守卫是一个全局的钩子函数，可以在路由跳转前或跳转后执行一些操作。

具体来说，我们可以使用beforeEach导航守卫来在路由跳转前执行一些操作，比如隐藏或显示高亮。在beforeEach中，我们可以根据路由的路径来判断当前路由是否需要隐藏或显示高亮。

下面是一个示例代码，演示了如何点击vue路由跳转隐藏和显示高亮：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'
Vue.use(VueRouter)
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
const router = new VueRouter({
  routes
})
router.beforeEach((to, from, next) => {
  // 隐藏之前路由的高亮
  const previousRoute = from.path
  const previousLink = document.querySelector(`a[href="#${previousRoute}"]`)
  if (previousLink) {
    previousLink.classList.remove('active')
  }
  // 显示当前路由的高亮
  const currentRoute = to.path
  const currentLink = document.querySelector(`a[href="#${currentRoute}"]`)
  if (currentLink) {
    currentLink.classList.add('active')
  }
  next()
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上述代码中，我们首先引入了Vue Router，并创建了一个包含两个路由的路由表。然后，我们创建了一个Vue Router实例，并在beforeEach导航守卫中实现了隐藏和显示高亮的逻辑。

在beforeEach中，我们首先获取之前路由的路径，并找到对应的链接元素。如果找到了链接元素，则移除其active类名，实现隐藏高亮的效果。

接着，我们获取当前路由的路径，并找到对应的链接元素。如果找到了链接元素，则添加active类名，实现显示高亮的效果。

我们调用next函数，继续执行路由跳转。

通过以上的代码和解释，我们可以实现点击vue路由跳转隐藏和显示高亮的效果。这样，用户在页面中点击不同的路由链接时，可以清晰地看到当前所在的页面，并且其他链接不再显示高亮。这样的交互效果可以提升用户体验和页面导航的可视性。