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

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

解释:

  • 首先导入 VueVue Router
  • 使用 Vue.use(Router) 注册 Vue Router。
  • 定义路由数组,每个路由对象包含 pathnamecomponent 属性。
  • 创建路由实例时,指定路由模式为 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.vueAbout.vue 组件:

Home.vue:




About.vue:




解释:

  • 每个组件都有一个