当前位置：首页 > VUE

vue实现导航图

2026-01-17 00:36:04VUE

Vue 实现导航图的方法

使用 Vue Router 实现基本导航

安装 Vue Router 依赖：

npm install vue-router

在项目中配置路由：

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

在主文件中引入并使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

在模板中使用导航链接

使用 <router-link> 组件创建导航：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

动态路由匹配

配置带参数的路由：

const routes = [
  { path: '/user/:id', component: User }
]

在组件中访问路由参数：

vue实现导航图

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    return {
      userId: computed(() => route.params.id)
    }
  }
}

嵌套路由

定义嵌套路由配置：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

在父组件中添加 <router-view>：

<template>
  <div class="user">
    <h2>User {{ $route.params.id }}</h2>
    <router-view/>
  </div>
</template>

编程式导航

在组件方法中进行导航跳转：

vue实现导航图

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const navigate = () => {
      router.push('/about')
      // 或 router.push({ path: '/about' })
    }

    return { navigate }
  }
}

导航守卫

添加全局前置守卫：

router.beforeEach((to, from, next) => {
  // 验证逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

添加路由独享守卫：

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 验证逻辑
    }
  }
]

路由元信息

定义路由元字段：

const routes = [
  {
    path: '/profile',
    component: Profile,
    meta: { requiresAuth: true }
  }
]

过渡动效

为路由视图添加过渡效果：

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

标签: vue