mcpField
V
vue-router

vue-router

github.com/partme-ai开发72578 次安装5 周前更新
代码仓库

关于 vue-router

用于在 Vue 2 和 Vue 3 项目中配置 Vue Router 的参考技能，涵盖路由模式、导航守卫、编程式导航、延迟加载和路由元数据。

主要功能

  1. 01Vue 2 与 Vue 3 路由
  2. 02动态路由与嵌套路由
  3. 03导航守卫
  4. 04编程式导航
  5. 05延迟加载路由与元数据

适用场景

  1. 01为 Vue 应用添加路由
  2. 02通过权限检查限制导航
  3. 03按需加载页面组件
  4. 04使用路由元数据控制布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/partme-ai/full-stack-skills --skill vue-router

安装后在 Claude Code 中输入/vue-router确认已加载。

附带文件LICENSE.txt

详细介绍

适用场景

在以下情况下使用此技能：

  • 在 Vue 2 或 Vue 3 项目中配置路由
  • 实现动态路由、嵌套路由和命名路由
  • 设置导航守卫（beforeEach、beforeResolve、afterEach）
  • 使用 router.push、router.replace 进行编程式导航
  • 实现路由懒加载以拆分代码
  • 使用路由 meta 字段控制权限和布局

使用方法

工作流
  1. 识别 Vue 版本（Vue 2 使用 Vue Router 3.x，Vue 3 使用 Vue Router 4.x）
  2. 配置路由，使用相应的 API
  3. 添加导航守卫，用于身份验证和授权
  4. 实现懒加载，用于大型页面组件
1. Vue Router 4（Vue 3）设置
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/users/:id', component: () => import('./views/UserDetail.vue'), props: true },
  {
    path: '/admin',
    component: () => import('./views/Admin.vue'),
    meta: { requiresAuth: true },
    children: [
      { path: 'dashboard', component: () => import('./views/AdminDashboard.vue') },
    ],
  },
];

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

// Navigation guard
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { path: '/login' };
  }
});

export default router;
2. Vue Router 3（Vue 2）设置
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') },
  ],
});
3. 编程式导航
// Vue 3 with Composition API
import { useRouter } from 'vue-router';

const router = useRouter();
router.push({ name: 'user', params: { id: '123' } });
router.replace('/home');
router.go(-1);

最佳实践

  • 集中管理路由守卫以检查权限；对大型页面组件使用懒加载
  • 使用带有 params/query 的命名路由实现类型安全的导航；避免在路由中存储敏感数据
  • 优先使用 createWebHistory 以获得简洁的 URL；为 HTML5 历史模式配置服务器端回退
  • 使用路由 meta 字段控制布局、面包屑和访问权限

资源

关键词

vue router，路由，导航守卫，Vue 3，Vue 2，懒加载，动态路由，嵌套路由，meta 字段，编程式导航，createRouter

评论

支持 Markdown