当前位置：首页 > VUE

vue实现导航切换

2026-01-19 15:18:19VUE

路由配置

在Vue项目中安装vue-router，并配置路由表。每个路由对应一个组件，用于展示不同导航页面的内容。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

导航组件

使用<router-link>组件创建导航菜单，通过to属性指定目标路由路径。active-class可自定义激活状态的样式类名。

<template>
  <nav>
    <router-link to="/" active-class="active">Home</router-link>
    <router-link to="/about" active-class="active">About</router-link>
  </nav>
</template>

<style scoped>
.active {
  font-weight: bold;
  color: #42b983;
}
</style>

路由视图

在父组件中添加<router-view>标签作为路由内容的出口，匹配到的组件会在此渲染。

<template>
  <div id="app">
    <NavBar />
    <router-view />
  </div>
</template>

编程式导航

通过useRouter钩子获取路由实例，调用push或replace方法实现编程式跳转。

import { useRouter } from 'vue-router'

const router = useRouter()
function goToAbout() {
  router.push('/about')
}

嵌套路由

配置子路由实现多级导航，父路由组件中需包含嵌套的<router-view>。

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: 'profile', component: Profile },
      { path: 'posts', component: Posts }
    ]
  }
]

vue实现导航切换