Vue Router 4 的安装与配置

Vue Router 是 Vue.js 的官方路由库，用于在 Vue 3 应用中实现页面导航和路由管理。Vue Router 4 是其适配 Vue 3 的版本，与 Composition API 深度集成，提供了现代化的路由功能。本节将详细讲解 Vue Router 4 的安装步骤、基本配置方法，并通过示例展示如何在项目中设置路由，帮助你快速上手路由管理。

什么是 Vue Router 4？

Vue Router 4 是 Vue 3 的路由解决方案，支持单页应用（SPA）的页面切换。它通过管理 URL 和组件的映射，实现无刷新导航，同时支持动态路由、嵌套路由和路由守卫等高级功能。

核心特性

  • 声明式导航：通过 <router-link> 和路由配置定义导航。
  • 编程式导航：通过 API（如 push、replace）控制路由。
  • 路由守卫：支持全局和局部路由拦截。
  • 与 Vue 3 集成：完全兼容 Composition API。

安装 Vue Router 4

步骤

  1. 安装依赖： 在 Vue 3 项目中运行：
    npm install vue-router@4

或使用 Yarn：

yarn add vue-router@4

  1. 创建路由配置文件： 在 src 目录下创建 router 文件夹，并添加 index.js：

    // src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
];

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

export default router;

  2. 集成到应用： 修改 main.js 将路由注册到应用：

    // src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

项目结构

src/
├── router/
│   └── index.js
├── views/
│   ├── Home.vue
│   └── About.vue
├── App.vue
└── main.js

基本配置

路由定义

routes 数组定义路由规则，每个对象包含：

  • path：URL 路径。
  • name：路由名称（可选，便于导航）。
  • component：对应的组件。

示例路由

const routes = [
  { path: '/', name: 'Home', component: () => import('@/views/Home.vue') },
  { path: '/about', name: 'About', component: () => import('@/views/About.vue') }
];
  • 懒加载：使用 () => import() 实现按需加载。

History 模式

Vue Router 4 支持多种历史记录模式：

  • createWebHistory：HTML5 模式，URL 无 #（推荐）。
  • createHashHistory：Hash 模式，URL 带 #。
  • createMemoryHistory：内存模式，用于非浏览器环境。
import { createRouter, createHashHistory } from 'vue-router';

const router = createRouter({
  history: createHashHistory(), // 使用 Hash 模式
  routes
});

在组件中使用

路由视图

在 App.vue 中添加 <router-view> 显示路由组件：

<!-- src/App.vue -->
<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view />
  </div>
</template>

视图组件

<!-- src/views/Home.vue -->
<template>
  <h1>欢迎来到首页</h1>
</template>

<!-- src/views/About.vue -->
<template>
  <h1>关于我们</h1>
</template>
  • 效果：点击导航链接切换页面内容。

编程式导航

使用 useRouter 和 useRoute 操作路由：

<template>
  <div>
    <button @click="goToAbout">跳转到关于</button>
    <p>当前路径：{{ route.path }}</p>
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    const goToAbout = () => {
      router.push('/about'); // 编程式跳转
    };

    return { route, goToAbout };
  }
};
</script>
  • 效果：点击按钮跳转到 /about，显示当前路径。

基本路由功能

1. 动态参数

支持路径参数：

// src/router/index.js
const routes = [
  { path: '/user/:id', name: 'User', component: () => import('@/views/User.vue') }
];

<!-- src/views/User.vue -->
<template>
  <h1>用户 ID: {{ route.params.id }}</h1>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    return { route };
  }
};
</script>
  • 访问：/user/123 显示“用户 ID: 123”。

2. 查询参数

获取 URL 查询参数：

<template>
  <p>查询：{{ route.query.name }}</p>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    return { route };
  }
};
</script>
  • 访问：/user/123?name=Alice 显示“查询：Alice”。

3. 导航到命名路由

router.push({ name: 'User', params: { id: '123' } });

配置选项

路由元信息

为路由添加元数据：

const routes = [
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    meta: { requiresAuth: true }
  }
];

滚动行为

控制页面滚动：

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition; // 恢复滚动位置
    return { top: 0 }; // 默认滚动到顶部
  }
});

注意事项

  1. 路由重复：

    • 默认 push 重复路径会报错，可添加错误处理：
      router.push('/about').catch(() => {});
    • 或使用 replace 替代。

  2. 懒加载优化：

    • 始终使用动态导入减少初始加载。

  3. 调试：

    • 使用 Vue DevTools 查看路由状态。

综合示例

配置路由

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', name: 'Home', component: () => import('@/views/Home.vue') },
  { path: '/product/:id', name: 'Product', component: () => import('@/views/Product.vue') }
];

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

export default router;

使用路由

<!-- src/App.vue -->
<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link :to="{ name: 'Product', params: { id: 1 } }">产品 1</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    router.push('/'); // 默认跳转首页
  }
};
</script>

<!-- src/views/Product.vue -->
<template>
  <div>
    <h1>产品 ID: {{ route.params.id }}</h1>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const goBack = () => router.go(-1);
    return { route, goBack };
  }
};
</script>
  • 效果：导航切换页面，支持动态参数和返回。

总结

Vue Router 4 的安装和配置简单高效，通过 createRouter 和 routes 定义路由，使用 <router-view> 和 <router-link> 实现导航。结合 useRouter 和 useRoute，你可以在组件中灵活操作路由。本节为你奠定了路由基础，下一节将探讨动态路由与守卫，进一步扩展路由能力！

Last Updated::