当前位置：首页 > VUE

用vue实现导航

2026-02-19 10:57:38VUE

Vue 实现导航的方法

使用 Vue Router 实现基础导航

安装 Vue Router 后，在项目中配置路由。定义路由路径和对应的组件，通过 <router-link> 实现导航跳转。

// main.js 或 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
});

app.use(router);

<!-- 在组件中使用 -->
<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</template>

动态路由与参数传递

通过冒号 : 定义动态路径参数，在组件中通过 $route.params 或 useRoute() 获取参数。

// 路由配置
{ path: '/user/:id', component: User }

<!-- 导航链接 -->
<router-link to="/user/123">User 123</router-link>

// 组件内获取参数
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id); // 输出 123

嵌套路由

通过 children 属性实现嵌套路由，父组件中需包含 <router-view> 作为子路由出口。

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      { path: 'child', component: Child }
    ]
  }
];

<!-- Parent.vue -->
<template>
  <router-link to="/parent/child">Child</router-link>
  <router-view></router-view>
</template>

编程式导航

通过 router.push() 或 router.replace() 实现编程式跳转。

import { useRouter } from 'vue-router';
const router = useRouter();

// 跳转到指定路径
router.push('/about');
// 带参数跳转
router.push({ path: '/user', query: { id: 1 } });

导航守卫

通过全局或路由独享的守卫控制导航行为。

// 全局前置守卫
router.beforeEach((to, from) => {
  if (to.path === '/admin' && !isAuthenticated) {
    return '/login';
  }
});

// 路由独享守卫
const routes = [
  {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from) => {
      // 验证逻辑
    }
  }
];

响应式导航菜单

结合 Vue 的响应式数据和条件渲染，实现动态导航菜单。

<template>
  <nav>
    <div v-for="item in navItems" :key="item.path">
      <router-link :to="item.path">{{ item.name }}</router-link>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/', name: 'Home' },
        { path: '/about', name: 'About' }
      ]
    };
  }
};
</script>

用vue实现导航