Vue2 与 Vue3 路由配置详解

在 Vue.js 中，路由是一个重要的部分，它允许我们在不同的组件之间导航。Vue2 和 Vue3 的路由配置有一些不同，本文将详细介绍如何在这两个版本中配置路由，并解释每段代码的作用。

Vue2 路由配置

安装 Vue 和 Vue Router

首先，确保已经安装了 Vue 和 Vue Router。对于 Vue2，使用 vue-router@3 版本：

npm install vue@2 vue-router@3

创建路由文件

在 src 目录下创建一个 router 文件夹，然后在其中创建一个 index.js 文件。

mkdir src/router
touch src/router/index.js

配置路由

在 src/router/index.js 文件中配置路由：

// 导入 Vue 和 Vue Router
import Vue from 'vue';
import Router from 'vue-router';
// 导入组件
import Home from '../components/Home.vue';
import About from '../components/About.vue';

// 使用 Vue Router
Vue.use(Router);

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

// 创建路由实例
const router = new Router({
  mode: 'history',  // 使用 HTML5 的 history 模式
  routes
});

// 导出路由实例
export default router;

解释：

• 首先导入 Vue 和 Vue Router。
• 使用 Vue.use(Router) 注册 Vue Router。
• 定义路由数组，每个路由对象包含 path、name 和 component 属性。
• 创建路由实例时，指定路由模式为 history（这可以避免 URL 中的 # 号）。
• 导出路由实例，以便在其他地方使用。

在主文件中使用路由

在 src/main.js 文件中导入并使用路由：

// 导入 Vue 和 App 组件
import Vue from 'vue';
import App from './App.vue';
// 导入路由
import router from './router';

// 创建 Vue 实例
new Vue({
  router,  // 注入路由
  render: h => h(App)
}).$mount('#app');

解释：

• 导入 Vue 和主组件 App.vue。
• 导入配置好的路由实例。
• 创建一个新的 Vue 实例，并将路由实例注入到 Vue 实例中。
• 使用 render 函数渲染 App 组件，并挂载到 #app 元素上。

创建组件

在 src/components 文件夹中创建 Home.vue 和 About.vue 组件：

Home.vue:

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

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

About.vue:

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

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

解释：

• 每个组件都有一个 <template> 部分，用于定义组件的 HTML 结构。
• <script> 部分用于定义组件的逻辑，包括组件的名字和其他选项。

Vue3 路由配置

安装 Vue 和 Vue Router

对于 Vue3，使用 vue-router@4 版本：

npm install vue@3 vue-router@4

创建路由文件

在 src 目录下创建一个 router 文件夹，然后在其中创建一个 index.js 文件。

mkdir src/router
touch src/router/index.js

配置路由

在 src/router/index.js 文件中配置路由：

// 导入 Vue Router 的创建函数和路由模式
import { createRouter, createWebHistory } from 'vue-router';
// 导入组件
import Home from '../components/Home.vue';
import About from '../components/About.vue';

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

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),  // 使用 HTML5 的 history 模式
  routes
});

// 导出路由实例
export default router;

解释：

• 使用 createRouter 和 createWebHistory 函数创建路由实例。
• 定义路由数组，结构与 Vue2 相同。
• 创建路由实例时，指定路由模式为 history。
• 导出路由实例，以便在其他地方使用。

在 Vue 3 中，vue-router 引入了一些新的 API 以便更好地与 Vue 3 的组合式 API (Composition API) 一起工作。createRouter 和 createWebHistory 是其中的两个核心函数，用于创建和配置路由器实例。

createRouter 是 Vue 3 中用于创建路由器实例的函数。它类似于 Vue 2 中的 new Router 构造函数，但语法更加简洁和现代化。这个函数需要一个配置对象，配置对象包含路由模式和路由规则等信息。

createWebHistory 是一个用于创建 HTML5 History 模式的路由历史记录对象的函数。在 Vue 2 中，我们通过 mode: 'history' 来启用 HTML5 History 模式。在 Vue 3 中，我们使用 createWebHistory 函数来实现同样的效果。

在主文件中使用路由

在 src/main.js 文件中导入并使用路由：

// 导入 createApp 函数和 App 组件
import { createApp } from 'vue';
import App from './App.vue';
// 导入路由
import router from './router';

// 创建 Vue 应用实例
const app = createApp(App);

// 使用路由
app.use(router);

// 挂载应用
app.mount('#app');

解释：

• 使用 createApp 函数创建 Vue 应用实例。
• 导入主组件 App.vue 和路由实例。
• 使用 app.use(router) 将路由实例注入到应用中。
• 使用 app.mount('#app') 挂载应用到 #app 元素上。

创建组件

在 src/components 文件夹中创建 Home.vue 和 About.vue 组件：

Home.vue:

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

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

About.vue:

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

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

解释：

• 每个组件的结构与 Vue2 相同，包含 <template> 和 <script> 部分。

总结

虽然 Vue2 和 Vue3 的路由配置略有不同，但整体结构和概念是相似的。Vue2 使用 vue-router@3，而 Vue3 使用 vue-router@4。主要区别在于路由器实例的创建方式以及在应用程序中集成路由的方式。

通过本文的详细介绍和代码示例，你应该可以掌握在 Vue2 和 Vue3 中配置路由的方法，并理解每段代码的作用。希望这篇博客能够帮助你快速上手 Vue 路由配置。