Vue 3中的路由和Vue Router 4有哪些变化?

面试题 —— 简述Vue 3中的路由和Vue Router 4有哪些变化 ？

一、与Vue 3的集成

• 无缝集成：Vue Router 4是为Vue 3设计的路由管理器，与Vue 3的响应式系统实现了无缝集成，提供了更好的性能和开发体验。

二、API和语法变化

• 创建路由实例：Vue Router 4使用createRouter函数创建路由实例，取代了Vue Router 3中的new Router方式，代码更加简洁。

// Vue Router 4
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

// Vue Router 3
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

• 路由守卫：Vue Router 4在路由守卫方面进行了优化，例如，在全局守卫中，不再需要显式调用next()函数，可以通过返回对象或Promise来中断导航。

// Vue Router 4
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    return { path: '/login' };
  }
});

// Vue Router 3
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

• 支持Composition API：Vue Router 4充分利用了Vue 3的组合式API（Composition API），提供了useRouter和useRoute函数，使路由逻辑与组件逻辑的结合更加紧密，提高了代码的可读性和可维护性。

// 在Vue 3组件中使用
import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    function navigateToHome() {
      router.push('/');
    }

    return {
      navigateToHome
    };
  }
};

三、功能增强

• 动态路由和嵌套路由：Vue Router 4支持更灵活的动态路由和嵌套路由配置，允许在运行时添加、删除或修改路由规则。

// 动态添加路由
router.addRoute({
  path: '/new',
  component: NewComponent
});

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

• 路由元信息：Vue Router 4允许在路由记录中存储自定义信息（如标题、是否需要认证等），这些信息可以在路由守卫、组件内部或其他地方被访问和使用。

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

• 编程式导航：Vue Router 4提供了更丰富的编程式导航API，如router.push、router.replace等，允许在Vue组件的方法中调用路由导航。

四、性能优化

• 懒加载：Vue Router 4支持路由组件的懒加载，通过动态导入组件，可以减少初始加载时间，提高应用性能。

const routes = [
  { path: '/about', component: () => import('./views/About.vue') }
];

• 类型支持：Vue Router 4增强了对TypeScript的支持，提供了更好的类型检查和自动补全体验。

五、其他改进

• HTML5 History模式：Vue Router 4默认使用HTML5 History模式构建URL，使URL更加美观，同时支持传统的哈希模式。
• 过渡效果：Vue Router 4支持在路由切换时为组件添加过渡效果，提升用户体验。

六、下面是博主整理的直观对比表格

以下是Vue Router 3和Vue Router 4之间的对比表格：

最后：总结来看，Vue Router 4在API、功能、性能和开发体验等方面都有了显著的提升，为Vue 3开发者提供了更加强大和灵活的路由管理解决方案。

看到这里的小伙伴，欢迎点赞、评论，收藏！
下方加友入群哈！