Vue2 与 Vue3 路由配置详解-繁依Fanyi

0635211

在 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:

About.vue:

解释：

  • 每个组件都有一个