Vue3中怎么使用vue-router

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建单页面应用（SPA）变得更加容易。在 Vue 3 中，Vue Router 也进行了相应的更新，以更好地支持 Vue 3 的新特性。本文将详细介绍如何在 Vue 3 中使用 Vue Router。

1. 安装 Vue Router

首先，你需要确保你的项目是基于 Vue 3 的。如果你还没有创建 Vue 3 项目，可以使用 Vue CLI 来创建一个新的项目：

vue create my-vue3-app

在创建项目时，选择 Vue 3 作为项目的 Vue 版本。

接下来，你需要安装 Vue Router。你可以使用 npm 或 yarn 来安装：

npm install vue-router@4

或者

yarn add vue-router@4

注意：Vue Router 4 是专门为 Vue 3 设计的，因此请确保安装的是 vue-router@4。

2. 创建路由实例

安装完成后，你需要在项目中创建一个路由实例。通常，我们会将路由配置放在一个单独的文件中，例如 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(process.env.BASE_URL),
  routes,
});

export default router;

在这个文件中，我们首先导入了 createRouter 和 createWebHistory 函数，这两个函数是 Vue Router 4 中用来创建路由实例和路由历史的。

然后，我们定义了一个 routes 数组，其中包含了两个路由对象。每个路由对象都包含 path、name 和 component 属性。path 是路由的路径，name 是路由的名称，component 是路由对应的组件。

接下来，我们使用 createRouter 函数创建了一个路由实例，并传入了 history 和 routes 两个参数。history 参数用于指定路由的历史模式，这里我们使用了 createWebHistory 来创建一个基于 HTML5 History API 的路由历史。routes 参数则是我们之前定义的路由数组。

最后，我们将路由实例导出，以便在其他地方使用。

3. 在 Vue 应用中使用路由

创建好路由实例后，我们需要在 Vue 应用中使用它。通常，我们会在 src/main.js 文件中引入路由实例，并将其挂载到 Vue 实例上。

打开 src/main.js 文件，并添加以下代码：

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

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

在这个文件中，我们首先导入了 createApp 函数、App 组件和 router 实例。然后，我们使用 createApp 函数创建了一个 Vue 应用实例，并通过 use 方法将路由实例挂载到应用上。最后，我们使用 mount 方法将应用挂载到 DOM 中的 #app 元素上。

4. 创建路由组件

在上面的路由配置中，我们引用了两个组件：Home 和 About。接下来，我们需要创建这两个组件。

首先，创建一个 src/views/Home.vue 文件，并添加以下代码：

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the Home page!</p>
  </div>
</template>

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

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

然后，创建一个 src/views/About.vue 文件，并添加以下代码：

<template>
  <div>
    <h1>About</h1>
    <p>This is the About page.</p>
  </div>
</template>

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

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

这两个组件非常简单，分别显示了一个标题和一段文字。你可以根据需要在这些组件中添加更多的内容和逻辑。

5. 在模板中使用路由

现在，我们已经配置好了路由，并且创建了对应的组件。接下来，我们需要在模板中使用路由。

打开 src/App.vue 文件，并添加以下代码：

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

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

在这个文件中，我们使用了 router-link 组件来创建导航链接。router-link 是 Vue Router 提供的一个组件，它用于生成导航链接，并且会自动处理路由的跳转。

router-view 组件是 Vue Router 提供的另一个组件，它用于显示当前路由对应的组件内容。当用户点击导航链接时，router-view 会根据当前的路由路径动态地渲染对应的组件。

6. 动态路由

除了静态路由外，Vue Router 还支持动态路由。动态路由允许你根据不同的参数来匹配不同的路由。

例如，假设我们有一个用户详情页面，需要根据用户的 ID 来显示不同的用户信息。我们可以使用动态路由来实现这个功能。

首先，在 src/router/index.js 文件中添加一个新的路由：

{
  path: '/user/:id',
  name: 'User',
  component: () => import('../views/User.vue'),
}

在这个路由中，我们使用了 :id 作为动态参数。当用户访问 /user/1 或 /user/2 时，Vue Router 会根据 :id 的值来匹配这个路由。

接下来，创建一个 src/views/User.vue 文件，并添加以下代码：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <p>This is the user detail page for user {{ $route.params.id }}.</p>
  </div>
</template>

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

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

在这个组件中，我们使用了 $route.params.id 来获取动态路由参数 id 的值，并将其显示在页面上。

7. 嵌套路由

Vue Router 还支持嵌套路由。嵌套路由允许你在一个路由组件中嵌套另一个路由组件。

例如，假设我们有一个用户详情页面，并且在用户详情页面中还有一个子页面用于显示用户的帖子。我们可以使用嵌套路由来实现这个功能。

首先，在 src/router/index.js 文件中修改 User 路由，添加一个 children 属性：

{
  path: '/user/:id',
  name: 'User',
  component: () => import('../views/User.vue'),
  children: [
    {
      path: 'posts',
      component: () => import('../views/UserPosts.vue'),
    },
  ],
}

在这个路由中，我们添加了一个 children 数组，其中包含了一个子路由。这个子路由的路径是 posts，对应的组件是 UserPosts.vue。

接下来，创建一个 src/views/UserPosts.vue 文件，并添加以下代码：

<template>
  <div>
    <h2>User Posts</h2>
    <p>This is the posts page for user {{ $route.params.id }}.</p>
  </div>
</template>

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

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

在这个组件中，我们简单地显示了一个标题和一段文字。

最后，在 src/views/User.vue 文件中添加一个 router-view 组件，用于显示子路由的内容：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <p>This is the user detail page for user {{ $route.params.id }}.</p>
    <router-view />
  </div>
</template>

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

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

现在，当用户访问 /user/1/posts 时，UserPosts 组件将会被渲染在 User 组件中的 router-view 位置。

8. 导航守卫

Vue Router 提供了导航守卫功能，允许你在路由跳转前或跳转后执行一些逻辑。导航守卫可以用于权限控制、数据预取等场景。

Vue Router 提供了三种导航守卫：

• 全局前置守卫：在路由跳转前执行。
• 全局解析守卫：在路由跳转前执行，但在所有组件内守卫和异步路由组件被解析之后。
• 全局后置钩子：在路由跳转后执行。

例如，我们可以使用全局前置守卫来检查用户是否登录：

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 假设 checkAuth 是一个检查用户是否登录的函数
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

在这个例子中，我们使用 router.beforeEach 方法注册了一个全局前置守卫。在每次路由跳转前，这个守卫都会检查用户是否登录。如果用户未登录且目标路由不是登录页面，则重定向到登录页面。

9. 路由懒加载

为了提高应用的性能，Vue Router 支持路由懒加载。路由懒加载允许你将路由对应的组件按需加载，而不是在应用启动时一次性加载所有组件。

在 Vue Router 4 中，你可以使用 import 函数来实现路由懒加载：

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

在这个例子中，我们使用 import 函数来动态导入组件。当用户访问 / 或 /about 时，对应的组件才会被加载。

10. 总结

在 Vue 3 中使用 Vue Router 非常简单。首先，你需要安装 Vue Router 4，然后创建一个路由实例并配置路由。接下来，你可以在 Vue 应用中使用路由，并通过 router-link 和 router-view 组件来实现导航和路由内容的渲染。

Vue Router 还支持动态路由、嵌套路由、导航守卫和路由懒加载等高级功能，这些功能可以帮助你构建更加复杂和高效的单页面应用。

希望本文能够帮助你更好地理解和使用 Vue Router 4。如果你有任何问题或建议，欢迎在评论区留言。