面试 Vue 框架八股文十问十答第十期

面试 Vue 框架八股文十问十答第十期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）Vue-Router 的懒加载如何实现

Vue-Router 的懒加载可以通过使用动态 import() 函数来实现。在定义路由时，可以将组件的 import() 函数作为组件的值，这样在路由被访问时，组件才会被加载。例如：

const Foo = () => import('./Foo.vue');

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
});

2）路由的hash和history模式的区别

• Hash 模式：URL 中会包含一个 # 符号，例如 http://example.com/#/foo。当 URL 中的 hash 发生变化时，页面不会重新加载，可以通过监听 hashchange 事件来获取 hash 的变化。
• History 模式：URL 不会包含 # 符号，例如 http://example.com/foo。可以通过浏览器的 History API 来控制页面的 URL，当路由发生变化时，页面不会重新加载。

3）如何获取页面的hash变化

可以通过监听 hashchange 事件来获取页面的 hash 变化。可以使用以下代码来监听 hash 变化：

window.addEventListener('hashchange', function() {
  console.log('Hash changed: ' + location.hash);
});

4）$route 和$router 的区别

• $route 是一个包含了当前路由信息的对象，可以访问当前路由的参数、路径、查询参数等信息。
• $router 是Vue-Router的路由实例，可以通过它进行路由的导航，例如跳转到其他页面或修改URL。

5）如何定义动态路由？如何获取传过来的动态参数？

1. Vue-Router中，可以使用冒号 : 来定义动态路由，如下所示：

   const routes = [
     {
       path: '/user/:id',
       component: User,
     }
   ];
   

   在上述示例中，`:id` 是一个动态参数。要获取传递给这个路由的动态参数，可以通过 `$route.params.id` 来访问，例如：


   // 在组件中获取动态参数
   const userId = this.$route.params.id;
   

6）Vue-router 路由钩子在生命周期的体现

Vue-router提供了多个导航钩子，它们在组件的生命周期中的不同阶段触发。主要的路由导航钩子包括：

• beforeRouteEnter: 在路由进入前被调用，此时组件实例还未被创建。
• beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用。
• beforeRouteLeave: 在离开当前路由时调用。

这些钩子的触发时机与组件的生命周期关系密切，但需要注意的是 beforeRouteEnter 中无法直接访问组件实例，可以通过回调函数参数来访问。

7）Vue-router跳转和location.href有什么区别

• Vue-router跳转： 使用Vue-router的 router.push() 或 router.replace() 方法进行路由跳转时，是通过JavaScript实现的，不会触发浏览器的整个页面刷新，只更新视图部分，从而提供更加流畅的用户体验。
• location.href： 直接使用 location.href 进行跳转会导致整个页面重新加载，相当于触发了完整的页面刷新。这样的跳转会重新加载所有资源，可能会导致性能损失，尤其在单页面应用中。

8）params和query的区别

• params： 用于提取路由路径中的参数，以冒号 : 形式定义在路由路径中。例如 /user/:id 中的 id 就是一个参数，通过 $route.params.id 访问。
• query： 用于提取路由中的查询参数，以键值对的形式存在于URL中。例如 /user?id=123 中的 id 就是一个查询参数，通过 $route.query.id 访问。

主要区别在于传递方式和位置，params直接嵌套在路由路径中，而query通过URL的查询参数传递。

9）Vue-router 导航守卫有哪些

Vue-router提供了全局导航守卫以及路由独享的守卫，主要有以下几个：

• 全局守卫：
  • beforeEach: 在路由切换前触发。
  • afterEach: 在路由切换后触发，不关心导航的成功与否。
  • beforeResolve: 在导航被确认之前触发，可以用于处理异步操作。
• 路由独享守卫：
  • beforeEnter: 在路由配置中独享守卫，和 beforeEach 类似。
  • beforeRouteEnter: 在路由进入前被调用，可以访问组件实例。
  • beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用。
  • beforeRouteLeave: 在离开当前路由时调用。

这些导航守卫提供了在路由生命周期中执行自定义逻辑的机会。

10）对前端路由的理解

前端路由是指在单页面应用（SPA）中，通过JavaScript实现的一种客户端导航方式，通过改变URL的片段（hash）或路径，实现在不重新加载整个页面的情况下切换视图。

主要优点包括：

• 更流畅的用户体验： 页面切换不需要重新加载整个页面，只更新部分视图，提供更快的响应速度。
• 更好的状态管理： 可以通过路由参数、查询参数等来管理页面状态，方便实现前端状态和URL的同步。

常见的前端路由库有Vue Router、React Router等，它们提供了丰富的功能和导航守卫，使得前端开发者能够更灵活地管理应用的导航和状态。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐