vue3中的路由和vue router4有哪些变化

2025-02-27 91 阅读3分钟

vue3中的路由和vue router4有哪些变化

Vue 3 和 Vue Router 4 带来了一些重要的变化和改进，以下是主要的变化：

创建路由实例的变化

Vue 2 + Vue Router 3:

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
  routes: [...]
});

Vue 3 + Vue Router 4:

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

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});

路由模式的变化

Vue Router 3 使用 mode 选项来定义路由模式：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
});

Vue Router 4 使用 createWebHistory、createWebHashHistory 和 createMemoryHistory 来定义路由模式：

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

const router = createRouter({
  history: createWebHistory(), // 或者 createWebHashHistory()
  routes: [...]
});

路由守卫的变化

Vue Router 3 中的全局守卫：

router.beforeEach((to, from, next) => {
  // ...
  next();
});

Vue Router 4 中的全局守卫：

router.beforeEach((to, from) => {
  // ...
  // 不再需要显式调用 next()
});

Vue Router 4 移除了 next 参数，守卫函数可以返回 false、undefined、{ path: '...' } 或 { name: '...' } 来控制导航行为。

路由组件的变化

Vue Router 3 中，路由组件通过 this.$route 和 this.$router 访问路由信息和导航。
Vue Router 4 中，推荐使用 useRoute 和 useRouter 组合式 API：

import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 访问路由信息
console.log(route.path);

// 导航
router.push('/new-path');

路由匹配的变化

Vue Router 4 引入了更强大的路由匹配语法，支持正则表达式和自定义匹配器。
Vue Router 4 移除了 * 通配符路由，改为使用 /:pathMatch(.*)* 或 /:pathMatch(.*) 来捕获所有路由。

路由别名和重定向的变化

Vue Router 4 中，别名和重定向的语法保持不变，但内部实现有所优化。
重定向示例：

const routes = [
  { path: '/home', redirect: '/' }
];

别名示例：

const routes = [
  { path: '/', alias: '/home', component: Home }
];

路由懒加载的变化

Vue Router 3 和 Vue Router 4 都支持路由懒加载，但 Vue Router 4 推荐使用 defineAsyncComponent：

const LazyComponent = defineAsyncComponent(() => import('./LazyComponent.vue'));

const routes = [
  { path: '/lazy', component: LazyComponent }
];

路由元信息的变化

Vue Router 4 中，路由元信息的使用方式与 Vue Router 3 相同，但可以通过 useRoute 访问：

const routes = [
  {
    path: '/protected',
    component: ProtectedComponent,
    meta: { requiresAuth: true }
  }
];

router.beforeEach((to) => {
  if (to.meta.requiresAuth) {
    // 检查用户权限
  }
});

路由嵌套的变化

Vue Router 4 中，嵌套路由的语法与 Vue Router 3 相同，但内部实现有所优化。
嵌套路由示例：

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
];

路由滚动行为的变化

Vue Router 4 中，滚动行为的配置方式与 Vue Router 3 相同：

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  }
});

路由错误处理的变化

Vue Router 4 引入了 onError 方法来处理导航错误：

router.onError((error) => {
  console.error('Navigation error:', error);
});

路由动态添加的变化

Vue Router 4 中，动态添加路由的方式与 Vue Router 3 相同：

router.addRoute({
  path: '/new-route',
  component: NewComponent
});

路由移除的变化

Vue Router 4 引入了 removeRoute 方法来移除路由：

const removeRoute = router.addRoute({
  path: '/new-route',
  component: NewComponent
});

removeRoute(); // 移除路由

路由命名视图的变化

Vue Router 4 中，命名视图的语法与 Vue Router 3 相同：

const routes = [
  {
    path: '/',
    components: {
      default: DefaultComponent,
      sidebar: SidebarComponent
    }
  }
];

路由过渡动画的变化

Vue Router 4 中，过渡动画的使用方式与 Vue Router 3 相同，但推荐使用 transition 组件：

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

总结

Vue Router 4 在 Vue 3 的基础上进行了许多优化和改进，提供了更简洁的 API 和更强大的功能。虽然一些 API 发生了变化，但整体使用方式与 Vue Router 3 相似，迁移过程相对平滑。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github