Vue 3 30天精进之旅：Day 07

Vue 3 30天精进之旅：Day 07 - Vue Router

news2025/1/30 16:41:36

引言

在前几天的学习中，我们深入探讨了Vue的表单输入绑定及其处理机制。今天，我们将学习Vue Router，这是Vue.js官方提供的路由管理器，用于构建单页面应用（SPA）。通过使用Vue Router，你可以轻松地实现页面之间的切换，管理URL并保持应用的状态。

1. 什么是Vue Router？

Vue Router是Vue.js的官方路由管理器，它用于在单页面应用中实现路由功能。通过Vue Router，你可以定义不同的路由，每个路由对应一个组件，使得用户能够在不重新加载页面的情况下浏览不同的视图。

2. 安装和配置Vue Router

首先，我们需要在我们的Vue项目中安装Vue Router。以下是安装和基本配置的步骤：

2.1 安装Vue Router

在项目根目录下运行以下命令：

npm install vue-router@4

2.2 创建路由配置

在src目录下创建一个名为router的文件夹，并在该文件夹中创建一个名为index.js的文件。然后在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;

3. 创建视图组件

在src/views目录下创建两个新文件：Home.vue和About.vue。

3.1 Home.vue

<template>
  <div>
    <h1>首页</h1>
    <p>欢迎来到我们的应用！</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

3.2 About.vue

<template>
  <div>
    <h1>关于我们</h1>
    <p>这是一个关于我们的应用的页面。</p>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

4. 在主应用中使用Vue Router

接下来，我们需要在src/main.js文件中引入并使用Vue Router。修改src/main.js如下：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js'; // 引入路由配置

createApp(App)
  .use(router) // 使用路由
  .mount('#app');

5. 添加路由链接

为了在不同的路由之间进行导航，我们可以使用<router-link>组件。修改src/App.vue如下：

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view> <!-- 渲染匹配的组件 -->
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
nav {
  margin-bottom: 20px;
}

router-link {
  margin-right: 10px;
}
</style>

在这个示例中，<router-link>用来创建导航链接，而<router-view>用以渲染匹配的视图组件。

6. 路由的嵌套和动态路由

6.1 嵌套路由

你可以创建嵌套路由，以便在一个视图中显示多个层级的组件。下面是如何创建嵌套路由的示例。首先，在src/views目录下创建一个名为User.vue的组件：

<template>
  <div>
    <h1>用户页面</h1>
    <router-link to="profile">查看个人资料</router-link>
    <router-link to="settings">设置</router-link>
    <router-view></router-view> <!-- 渲染嵌套的路由组件 -->
  </div>
</template>

<script>
export default {
  name: 'User',
};
</script>

然后，创建两个新组件：Profile.vue和Settings.vue，并在router/index.js中配置嵌套路由：

import Profile from '../views/Profile.vue';
import Settings from '../views/Settings.vue';

// 在routes数组中添加User路由
const routes = [
  // 之前的路由...
  {
    path: '/user',
    name: 'User',
    component: User,
    children: [
      {
        path: 'profile',
        name: 'Profile',
        component: Profile,
      },
      {
        path: 'settings',
        name: 'Settings',
        component: Settings,
      },
    ],
  },
];

7. 处理路由参数

你可以在路由中定义动态参数，以便在URL中传递信息。例如，如果你想创建一个用户详情页面，可以创建一个动态路由：

{
  path: '/user/:id',
  name: 'UserDetail',
  component: UserDetail,
}

然后在UserDetail组件中，你可以通过this.$route.params.id访问该参数。

8. 实践：构建一个简单的导航应用

为了巩固今天的学习，我们将构建一个简单的导航应用，用户可以在首页和关于页面之间切换，以及访问用户页面。

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/user">用户</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
nav {
  margin-bottom: 20px;
}
</style>

在router/index.js中，添加新的路由和组件。