vue3中路由基本用法 Vue Router

详细用法请参照官网：API 文档 | Vue Router

1. 在 Vue 3 中配置路由（TypeScript）

首先安装 Vue Router：

npm install vue-router@next

在路由配置文件中（例如 src/router/index.ts）：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

// 定义路由
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
  },
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: () => import('@/views/UserProfile.vue'),
    props: true,
  },
];

// 创建路由
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

2. 路由模式

Vue 3 Router 支持不同的历史记录模式：

• createWebHistory：基于 HTML5 的历史模式（推荐用于单页应用）。
• createWebHashHistory：哈希模式（/#/about）。
• createMemoryHistory：无 URL 支持的内存模式（例如用于服务端渲染）。

3. 参数传递：query 和 params

• params：用于动态路由参数（例如 /user/:id）。参数通过路径传递。
• query：用于传递附加数据，附加到 URL 中（例如 ?key=value）。

使用 params 示例：

// src/views/UserProfile.vue
<script setup lang="ts">
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = route.params.id; // 访问路由参数 'id'
</script>

使用 query 示例：

// src/views/Search.vue
<script setup lang="ts">
import { useRoute } from 'vue-router';

const route = useRoute();
const searchQuery = route.query.q; // 访问查询参数 'q'
</script>

4. 路由 props 的不同用法

• props: true：将路由参数直接作为组件的 props。
• props: (route) => ({ id: route.params.id })：通过函数传递自定义 props。
• props: { staticProp: 'value' }：传递静态值作为 props。

{
  path: '/user/:id',
  name: 'UserProfile',
  component: () => import('@/views/UserProfile.vue'),
  props: true, // 直接传递路由参数作为组件的 props
},
{
  path: '/product/:id',
  name: 'ProductDetails',
  component: () => import('@/views/ProductDetails.vue'),
  props: (route) => ({ productId: route.params.id }), // 自定义 props
},
{
  path: '/help',
  name: 'Help',
  component: () => import('@/views/Help.vue'),
  props: { staticHelpType: 'faq' }, // 静态 props
}

5. 命名路由和 <router-link> 的 to 语法

在 Vue 3 中，有多种方式定义导航目标：

<!-- 使用路由名称 -->
<router-link :to="{ name: 'UserProfile', params: { id: 123 }}">用户资料</router-link>

<!-- 使用路径 -->
<router-link to="/user/123">用户资料</router-link>

<!-- 包含查询参数 -->
<router-link :to="{ path: '/search', query: { q: 'vue' } }">搜索</router-link>

6. 嵌套路由

嵌套路由用于层次化视图，子路由将渲染在父组件中的 <router-view> 中。

const routes: Array<RouteRecordRaw> = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    children: [
      {
        path: 'settings',
        component: () => import('@/views/DashboardSettings.vue'),
      },
      {
        path: 'profile',
        component: () => import('@/views/DashboardProfile.vue'),
      },
    ],
  },
];

7. 编程式导航：push 和 replace

Vue Router 提供了用于编程式导航的方法：

import { useRouter } from 'vue-router';

const router = useRouter();

// 导航到新路由
router.push({ name: 'UserProfile', params: { id: 123 } });

// 替换当前路由（不创建历史记录）
router.replace({ path: '/about' });

8. 监听路由变化

可以使用 watch 监听路由变化：

import { onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

watch(
  () => route.params.id,
  (newId, oldId) => {
    console.log('路由参数从', oldId, '变为', newId);
  }
);

通过这个设置，你可以在 Vue 3 中使用 TypeScript 高效地管理路由导航、跟踪参数和处理基于路由的 props。