Vue2 与 Vue3 中的路由模式及区别

目录

一、Vue2 中的路由模式及区别

（一）路由模式

（二）区别

二、Vue3 中的路由模式及区别

（一）区别

---

在 Vue 的开发中，路由起着至关重要的作用。今天我们来深入探讨一下 Vue2 和 Vue3 中的路由模式及其区别。

一、Vue2 中的路由模式及区别

（一）路由模式

在 Vue2 中，常见的路由模式分为两种：哈希（hash）模式和历史（history）模式。

（二）区别

1. 找不到页面发送请求的问题：
   • 历史模式（history）：当页面找不到时，会发送一次请求给后端，并且会把参数携带过去。这会给后端带来一定的压力。
   • 哈希模式（hash）：当页面找不到时，不会发送请求，会默认去找localhost:8080。通常在哈希模式下，如果找不到页面，我们会配置一个 404 页面来处理。
2. 项目打包前端自测问题：
   • 历史模式（history）：项目打包后，默认情况下内容可能出不来，需要配置一些额外的项。
   • 哈希模式（hash）：项目打包后，一般不会有问题，可以正常显示内容。
3. 表象不同：
   • 哈希模式会带有一个井号，例如：http://example.com/#/page。
   • 历史模式颜值相对较高，没有井号，例如：http://example.com/page。

以下是一个 Vue2 中使用路由的示例代码：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // 定义路由配置
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent },
];

const router = new VueRouter({
  routes,
  mode: 'hash', // 可以根据需要切换为 history
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

二、Vue3 中的路由模式及区别

在 Vue3 中，路由的模式和 Vue2 基本相同，同样分为哈希模式和历史模式。

（一）区别

1. 语法变化：Vue3 在语法上进行了一些优化，例如在创建路由实例和定义路由配置时，语法更加简洁。
2. 性能优化：Vue3 在性能方面进行了一些改进，路由的切换可能会更加流畅。

以下是一个 Vue3 中使用路由的示例代码：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import HomeComponent from './components/Home.vue';
import AboutComponent from './components/About.vue';

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent },
];

const router = createRouter({
  history: createWebHistory(), // 可以根据需要切换为 createWebHashHistory()
  routes,
});

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

无论是在 Vue2 还是 Vue3 中，选择合适的路由模式取决于项目的具体需求。如果需要更好的用户体验和简洁的 URL，可以选择历史模式，但需要注意处理页面找不到的情况和项目打包后的配置问题。如果更注重稳定性和兼容性，可以选择哈希模式