**2. 创建路由配置文件**  
在项目 `src` 目录下新建 `router/index.ts` 文件，定义路由规则与路由实例。使用 `RouteRecordRaw` 类型约束路由配置，确保 TypeScript 类型检查生效：
```typescript
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 懒加载组件，减少初始加载时间
const Home = () => import('@/views/Home.vue');
const ProductDetail = () => import('@/views/ProductDetail.vue');
const Login = () => import('@/views/Login.vue');

// 路由规则数组，使用 RouteRecordRaw 类型约束
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: '首页 - 电商平台' } // 元信息，可用于设置页面标题等
  },
  {
    path: '/product/:id', // 动态路由参数，用于商品详情页
    name: 'ProductDetail',
    component: ProductDetail,
    meta: { title: '商品详情 - 电商平台' }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { title: '登录 - 电商平台', requiresAuth: false } // 无需登录即可访问
  }
];

// 创建路由实例，使用 HTML5 history 模式（无 # 号）
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 基础路径从环境变量获取
  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');

<!-- ProductList.vue -->
<template>
  <div class="product-list">
    <!-- 循环渲染商品列表 -->
    <div v-for="product in products" :key="product.id" class="product-item">
      <!-- 声明式跳转，传递 params 参数 -->
      <router-link :to="`/product/${product.id}`" class="product-link">
        <h3>{{ product.name }}</h3>
        <p>价格：{{ product.price }} 元</p>
      </router-link>
    </div>
  </div>
</template>

<!-- SearchBar.vue -->
<template>
  <div class="search-bar">
    <input v-model="keyword" placeholder="输入商品关键词..." />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const keyword = ref('');
const router = useRouter(); // 获取路由实例

const handleSearch = () => {
  if (keyword.value.trim()) {
    // 编程式跳转，传递 query 参数（URL 显示为 ?keyword=xxx）
    router.push({
      path: '/search',
      query: { keyword: keyword.value } // query 参数会拼接到 URL 查询字符串
    });
  }
};
</script>

<!-- ProductDetail.vue -->
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';

const route = useRoute(); // 获取当前路由信息
const product = ref(null);

onMounted(() => {
  // 从 params 中获取商品 ID（路由配置中定义的 :id）
  const productId = route.params.id; 
  // 调用 API 获取商品详情
  fetchProductDetail(productId).then(data => {
    product.value = data;
  });
});
</script>

const routes: RouteRecordRaw[] = [
  {
    path: '/category',
    name: 'Category',
    component: () => import('@/views/CategoryLayout.vue'), // 父组件（布局组件）
    children: [
      {
        path: 'phone', // 子路由路径（完整 URL 为 /category/phone）
        name: 'PhoneList',
        component: () => import('@/views/PhoneList.vue') // 手机列表子组件
      },
      {
        path: 'laptop', // 完整 URL 为 /category/laptop
        name: 'LaptopList',
        component: () => import('@/views/LaptopList.vue') // 笔记本列表子组件
      },
      {
        path: '', // 默认子路由（当 URL 为 /category 时显示）
        redirect: 'phone' // 重定向到手机列表
      }
    ]
  }
];

<!-- CategoryLayout.vue -->
<template>
  <div class="category-page">
    <!-- 左侧分类导航（父组件固定内容） -->
    <div class="category-sidebar">
      <h2>商品分类</h2>
      <ul>
        <!-- 跳转到子路由，使用相对路径（无需 / 开头） -->
        <li><router-link to="phone">手机</router-link></li>
        <li><router-link to="laptop">笔记本</router-link></li>
      </ul>
    </div>
    
    <!-- 右侧内容区，子路由组件将渲染到此处 -->
    <div class="category-content">
      <router-view /> <!-- 子路由出口 -->
    </div>
  </div>
</template>

<style scoped>
/* 布局样式：左侧导航固定宽度，右侧内容自适应 */
.category-page {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.category-sidebar {
  width: 200px;
  border-right: 1px solid #eee;
}
.category-content {
  flex: 1;
}
</style>

// router/index.ts
import { useUserStore } from '@/stores/user'; // 假设使用 Pinia 存储用户状态

// 全局前置守卫，每次路由跳转前触发
router.beforeEach((to, from) => {
  const userStore = useUserStore(); // 获取用户状态
  
  // 判断目标路由是否需要登录（通过 meta.requiresAuth 标记，默认需要）
  const requiresAuth = to.meta.requiresAuth ?? true;
  
  // 未登录且需要登录的路由，重定向到登录页，并记录目标路径（登录后返回）
  if (!userStore.isLogin && requiresAuth) {
    return { 
      path: '/login',
      query: { redirect: to.fullPath } // 存储目标路径，登录后可跳转回来
    };
  }
  
  // 设置页面标题（从路由 meta.title 获取）
  document.title = to.meta.title as string || '电商平台';
});

// router/index.ts 中的路由配置
{
  path: '/admin/orders',
  name: 'AdminOrders',
  component: () => import('@/views/admin/Orders.vue'),
  meta: { title: '订单管理 - 管理员后台' },
  // 路由独享守卫，仅管理员可访问
  beforeEnter: (to, from) => {
    const userStore = useUserStore();
    // 非管理员用户禁止访问，返回 false 取消导航
    if (!userStore.isAdmin) {
      alert('无权限访问管理员页面');
      return false; // 阻止跳转
    }
  }
}

<!-- ProductDetail.vue -->
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { ref } from 'vue';

const product = ref(null);
const route = useRoute();

// 组件内守卫：路由进入前触发（此时组件实例未创建，无法访问 this）
beforeRouteEnter(async (to) => {
  const productId = to.params.id;
  // 预加载商品数据，返回结果会传递给 next 回调（Vue 4 可直接 return 数据）
  const productData = await fetchProductDetail(productId);
  // 返回数据会作为参数传递给组件内的 setup 或 created 钩子
  return { productData };
}, (to, from, next) => {
  // Vue 3 兼容写法（Vue 4 可省略 next，直接 return 数据）
  next((vm) => {
    vm.product = vm.productData; // 将预加载数据赋值给组件实例
  });
});
</script>