跳到主要内容

Vue Router基础路由

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。它允许你在不重新加载页面的情况下，动态地切换视图。本文将带你了解 Vue Router 的基础路由概念，并通过实际案例帮助你掌握其使用方法。

什么是 Vue Router？​

Vue Router 是 Vue.js 的官方路由库，用于在单页面应用中管理页面导航。它通过将 URL 与组件映射起来，使得用户可以在不同的视图之间切换，而无需重新加载整个页面。

为什么需要 Vue Router？​

在传统的多页面应用中，每次导航都会导致页面重新加载，这会降低用户体验。而单页面应用（SPA）通过动态加载内容，提供了更流畅的用户体验。Vue Router 正是为了实现这一目标而设计的。

安装 Vue Router​

在开始使用 Vue Router 之前，你需要先安装它。如果你使用的是 Vue CLI 创建的项目，可以通过以下命令安装 Vue Router：

bash
npm install vue-router

如果你使用的是 Vue 3，请确保安装的是 Vue Router 4：

bash
npm install vue-router@4

基本路由配置​

1. 创建路由实例​

首先，我们需要创建一个路由实例。在 Vue 3 中，你可以通过 createRouter 函数来创建路由实例：

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

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  }
];

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

export default router;

2. 在 Vue 应用中使用路由​

接下来，我们需要在 Vue 应用中使用路由。你可以在 main.js 或 main.ts 文件中将路由实例挂载到 Vue 应用上：

javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

3. 配置路由视图​

在 Vue 组件中，你可以使用 <router-view> 标签来渲染匹配的组件。例如，在 App.vue 中：

vue
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

在上面的代码中，<router-link> 用于创建导航链接，而 <router-view> 用于渲染当前路由匹配的组件。

动态路由匹配​

有时我们需要根据 URL 中的参数动态地匹配路由。Vue Router 允许我们使用动态路径参数来实现这一点。

示例：动态路由​

假设我们有一个用户详情页面，URL 中包含用户的 ID。我们可以这样配置路由：

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

在 User.vue 组件中，你可以通过 this.$route.params.id 访问到 URL 中的用户 ID：

vue
<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

嵌套路由​

Vue Router 支持嵌套路由，允许你在一个路由中嵌套另一个路由。这在构建复杂的页面布局时非常有用。

示例：嵌套路由​

假设我们有一个用户页面，其中包含用户的个人资料和帖子两个子页面。我们可以这样配置嵌套路由：

javascript
const routes = [
  {
    path: '/user/:id',
    component: () => import('@/views/User.vue'),
    children: [
      {
        path: 'profile',
        component: () => import('@/views/UserProfile.vue')
      },
      {
        path: 'posts',
        component: () => import('@/views/UserPosts.vue')
      }
    ]
  }
];

在 User.vue 组件中，你可以使用 <router-view> 来渲染子路由：

vue
<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <router-link to="profile">Profile</router-link> |
    <router-link to="posts">Posts</router-link>
    <router-view />
  </div>
</template>

实际应用场景​

场景：博客应用​

假设我们正在构建一个博客应用，其中包含以下页面：

  • 首页：显示所有博客文章的列表。
  • 文章详情页：显示单篇文章的详细内容。
  • 关于页：显示关于博客的信息。

我们可以使用 Vue Router 来管理这些页面的导航：

javascript
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/post/:id',
    component: () => import('@/views/Post.vue')
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  }
];

在 Home.vue 中，我们可以显示博客文章的列表，并为每篇文章生成一个链接：

vue
<template>
  <div>
    <h1>Blog Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="`/post/${post.id}`">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

在 Post.vue 中，我们可以根据 URL 中的文章 ID 显示文章的详细内容：

vue
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null
    };
  },
  created() {
    const postId = this.$route.params.id;
    // 根据 postId 获取文章内容
    this.post = this.getPostById(postId);
  },
  methods: {
    getPostById(id) {
      // 模拟获取文章内容
      return {
        id: id,
        title: `Post ${id}`,
        content: 'This is the content of the post.'
      };
    }
  }
};
</script>

总结​

通过本文，你已经学习了 Vue Router 的基础路由概念，包括如何配置路由、动态路由匹配、嵌套路由以及如何在实际应用中使用 Vue Router。Vue Router 是构建单页面应用的重要工具，掌握它将帮助你构建更复杂的应用。

附加资源​

练习​

  1. 创建一个简单的 Vue 应用，包含首页、关于页和一个动态路由页面。
  2. 尝试在动态路由页面中根据 URL 参数显示不同的内容。
  3. 使用嵌套路由创建一个包含子页面的用户详情页面。

希望你能通过这些练习进一步巩固所学知识，并开始构建自己的 Vue 应用！