【前端高频面试题--Vue路由篇】

 作者 ：“码上有前”
 文章简介 ：前端高频面试题
 欢迎小伙伴们 点赞、收藏⭐、留言

对Vue-Router的理解

Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用程序（SPA）。它能够实现客户端的路由跳转、导航以及组件的动态加载，使得开发单页面应用变得更加简单和高效。

以下是对 Vue Router 的一些理解：

1. 路由映射：
   Vue Router 允许我们在应用程序中定义多个路由，并将每个路由与对应的组件进行映射。通过配置路由映射，可以在不同的 URL 下加载不同的组件，实现单页面应用的多页面效果。

2. 嵌套路由：
   Vue Router 支持嵌套路由，这意味着我们可以在组件中定义子路由。通过嵌套路由，我们可以构建更复杂的应用程序结构，使得页面的组织更加清晰和灵活。

3. 路由导航：
   Vue Router 提供了丰富的导航方法，如 push、replace 和 go，用于在应用程序中进行路由导航。通过调用这些方法，我们可以在组件内部进行路由跳转，实现页面之间的切换和导航。

4. 路由参数：
   Vue Router 支持动态路由参数，通过在路由路径中使用冒号（:）来指定参数的占位符。这使得我们可以定义带有动态参数的路由，并在组件中获取和使用这些参数。

5. 导航守卫：
   Vue Router 提供了导航守卫钩子函数，如 beforeEach、beforeResolve 和 afterEach，用于在路由导航过程中执行一些操作。通过导航守卫，我们可以在路由跳转之前或之后执行逻辑，例如验证用户权限、加载数据等。

6. 懒加载：
   Vue Router 支持组件的懒加载，即在需要时才加载组件的代码。这可以提高应用程序的性能，减少初始加载时间，并根据需要动态加载组件。

7. 路由模式：
   Vue Router 支持不同的路由模式，包括 Hash 模式和 History 模式。Hash 模式使用 URL 中的 hash（#）来模拟路由，而 History 模式使用 HTML5 的 History API 来管理路由。可以根据项目需求选择适合的路由模式。

通过使用 Vue Router，我们可以轻松构建复杂的单页面应用程序，实现页面的路由导航、参数传递、组件的懒加载等功能。它与 Vue.js 框架紧密集成，提供了一种优雅且功能强大的方式来管理应用程序的路由。

Vue路由懒加载的实现

在 Vue.js 中使用 Vue Router 时，可以通过懒加载（Lazy Loading）的方式按需加载路由组件，以提高应用的初始加载速度和性能。

懒加载可以将路由组件分割为更小的代码块，并在需要时动态加载。这意味着在初始加载页面时，只会加载必要的代码，而不会一次性加载所有路由组件的代码。

要实现懒加载，可以使用 Webpack 的动态 import 语法（import()）或者 Vue CLI 的异步组件（Async Components）语法。这些语法允许将组件的导入延迟到需要时再进行加载。

以下是一个使用懒加载的示例，展示了如何在 Vue Router 中实现懒加载：

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

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')  // 使用动态 import 语法懒加载组件
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')  // 使用动态 import 语法懒加载组件
  }
];

const router = new VueRouter({
  routes
});

export default router;

在上述示例中，通过使用动态 import 语法 import()，将需要懒加载的组件进行延迟加载。当路由被访问时，对应的组件才会被加载。

在实际开发中，可以根据需要将需要懒加载的组件按照路由进行拆分，并在对应的路由配置中使用懒加载语法来引入组件。

通过懒加载可以将应用的初始加载大小缩小，提高应用的加载速度，并在用户访问对应路由时再进行组件的加载，从而提升用户体验和应用性能。

路由的hash和history模式

在 Vue Router 中，有两种常见的路由模式：Hash 模式和 History 模式，它们之间有一些区别。

1. Hash 模式：

   • 使用 URL 中的 hash（即 # 符号）来模拟路由，例如 http://example.com/#/about。
   • Hash 模式不会将路由发送到服务器，所有的路由都在客户端进行处理。
   • 在使用 Hash 模式时，路由的变化不会触发浏览器向服务器发送请求，因此适用于静态网页或不支持服务端配置的环境。
   • Hash 模式在旧版浏览器中具有良好的兼容性。

2. History 模式：

   • 使用 HTML5 的 History API 来管理路由，没有 # 符号，例如 http://example.com/about。
   • History 模式允许路由的变化通过向服务器发送请求，服务器需要正确配置以支持这种模式。
   • 在 History 模式下，可以使用 pushState 和 replaceState 方法来改变 URL，而不会引起页面的刷新。
   • 使用 History 模式时，需要在后端进行相应的配置，以确保在直接访问路由时返回正确的页面。

区别总结如下：

• URL 格式：Hash 模式使用带有 # 符号的 URL，而 History 模式使用无 # 符号的 URL。
• 路由变化的触发：Hash 模式的路由变化不会触发向服务器发送请求，而 History 模式可以触发向服务器发送请求。
• 服务端配置：Hash 模式不需要服务器端配置，而 History 模式需要服务器端配置以确保在直接访问路由时返回正确的页面。
• 兼容性：Hash 模式在旧版浏览器中具有良好的兼容性，而 History 模式可能需要一些 polyfill 来支持旧版浏览器。

在使用 Vue Router 时，默认使用的是 Hash 模式，可以通过配置路由的 mode 参数来切换到 History 模式。例如：

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

需要注意的是，在使用 History 模式时，还需要确保服务器端正确配置，以处理直接访问路由的情况。如果没有正确配置，直接访问路由会返回 404 错误。

如何获取页面的hash变化

要获取页面的 hash 变化，可以使用 JavaScript 中的 window.onhashchange 事件或者 Vue Router 提供的导航守卫钩子函数。

1. 使用 window.onhashchange 事件：

   window.onhashchange = function() {
     const newHash = window.location.hash;
     console.log('Hash changed:', newHash);
   };
   

   上述代码会在页面的 hash 变化时触发 onhashchange 事件，并在事件处理函数中获取新的 hash 值。

2. 使用 Vue Router 导航守卫钩子函数：
   如果你正在使用 Vue Router，可以使用其提供的导航守卫钩子函数来监听路由的变化，包括 hash 的变化。

   • beforeEach: 在每次路由跳转之前触发。
   • afterEach: 在每次路由跳转之后触发。

   例如，在 Vue Router 中使用 afterEach 钩子函数来获取 hash 变化：

   import router from './router';
   
   router.afterEach((to, from) => {
     const newHash = window.location.hash;
     console.log('Hash changed:', newHash);
   });
   

   上述代码会在每次路由跳转完成后触发 afterEach 钩子函数，并在函数中获取新的 hash 值。

无论是使用 window.onhashchange 事件还是 Vue Router 的导航守卫钩子函数，都能够让你在页面的 hash 变化时获取到新的 hash 值，并进行相应的处理。

路由中$route 和$router 的区别

在 Vue Router 中，$route 和 $router 是两个不同的对象，它们的作用和功能略有不同。

1. $route 对象：

   • $route 是一个用于访问当前活动路由的对象。
   • 它包含了当前路由的信息，如路径、参数、查询参数、哈希值等。
   • $route 是一个只读对象，不能直接修改其中的属性。
   • 在组件内部可以通过 this.$route 来访问 $route 对象。

2. $router 对象：

   • $router 是一个用于进行路由导航的对象。
   • 它提供了一些方法，如 push、replace 和 go，用于在应用程序中进行路由跳转、导航。
   • $router 对象是可写的，可以通过调用方法改变当前的路由状态。
   • 在组件内部可以通过 this.$router 来访问 $router 对象。

总结区别如下：

• $route 是一个只读对象，用于访问当前路由的信息。
• $router 是一个可写对象，用于进行路由导航和控制当前路由状态。
• $route 提供了当前路由的信息，而 $router 提供了路由导航的方法。

示例用法：

export default {
  methods: {
    goToAboutPage() {
      // 使用 $router 对象进行路由跳转
      this.$router.push('/about');
    },
    logCurrentRoute() {
      // 使用 $route 对象获取当前路由的信息
      console.log('Current route:', this.$route.path);
    }
  }
}

在上述示例中，goToAboutPage 方法使用 $router 对象的 push 方法进行路由跳转，而 logCurrentRoute 方法使用 $route 对象的 path 属性获取当前路由的路径信息。

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

在 Vue Router 中，可以通过定义动态路由来匹配包含参数的路由路径，并且可以通过 $route 对象获取传递的动态参数。

1. 定义动态路由：
   在路由配置中，使用冒号（:）来指定动态参数的占位符。例如，如果要定义一个带有动态参数的路由，可以使用以下方式：

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

   在上述示例中，/user/:id 定义了一个动态路由，:id 是一个占位符，表示该位置可以匹配任意值作为参数。

2. 获取传递的动态参数：
   通过 $route 对象可以获取传递给动态路由的参数。可以使用 $route.params 对象来访问这些参数。

   export default {
     created() {
       const userId = this.$route.params.id;
       console.log('User ID:', userId);
     }
   };
   

   在上述示例中，通过 $route.params.id 访问了传递给动态路由的 id 参数的值。

   如果在同一个组件中，通过不同的路由访问了同一个组件，当路由参数发生变化时，组件会重新创建，created 钩子函数会被再次调用，从而可以获取新的动态参数。

需要注意的是，当定义动态路由时，要确保在组件中正确处理和响应这些动态参数的变化，以便在参数变化时更新组件的状态或重新获取数据。

另外，如果需要在组件内部监听动态参数的变化，可以使用 beforeRouteUpdate 导航守卫钩子函数。该钩子函数会在路由参数发生变化时触发，并提供新的参数和旧的参数。

export default {
  beforeRouteUpdate(to, from, next) {
    const newUserId = to.params.id;
    const oldUserId = from.params.id;
    console.log('New User ID:', newUserId);
    console.log('Old User ID:', oldUserId);
    next();
  }
};

在上述示例中，beforeRouteUpdate 钩子函数接收三个参数：to、from 和 next。通过 to.params.id 和 from.params.id 可以获取新的和旧的动态参数的值。

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

在 Vue Router 中，路由钩子函数的执行与组件的生命周期函数有一定的关联。路由钩子函数会在组件的生命周期中的特定阶段被触发调用，以执行相应的逻辑。下面是一些常用的路由钩子函数及其在组件生命周期中的体现：

1. beforeEach：

   • 生命周期体现：在组件创建之前调用。
   • 功能：在每次路由跳转之前执行一些逻辑，如验证用户权限、登录状态检查等。
   • 示例：

     router.beforeEach((to, from, next) => {
       // 执行逻辑
       next();
     });
     

2. beforeRouteEnter：

   • 生命周期体现：在组件被创建和添加到路由之前调用。
   • 功能：在组件进入路由之前执行一些逻辑，如预加载数据。
   • 示例：

     export default {
       beforeRouteEnter(to, from, next) {
         // 执行逻辑
         next();
       }
     };
     

3. beforeRouteUpdate：

   • 生命周期体现：在路由参数发生变化时，组件复用之前调用。
   • 功能：在组件复用之前执行一些逻辑，如根据新的路由参数更新组件的状态或重新加载数据。
   • 示例：

     export default {
       beforeRouteUpdate(to, from, next) {
         // 执行逻辑
         next();
       }
     };
     

4. beforeRouteLeave：

   • 生命周期体现：在离开当前路由之前调用。
   • 功能：在离开当前路由之前执行一些逻辑，如保存表单数据、提示用户是否离开等。
   • 示例：

     export default {
       beforeRouteLeave(to, from, next) {
         // 执行逻辑
         next();
       }
     };
     

这些路由钩子函数与组件的生命周期函数相结合，使得我们可以在组件不同的生命周期阶段执行特定的路由逻辑。通过这些钩子函数，我们可以在路由跳转前后执行一些操作，控制组件的加载、数据的获取、状态的更新等。这样，我们可以更加灵活地控制路由的行为，实现更复杂的应用逻辑。

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

Vue Router 跳转和 location.href 之间有一些关键区别，如下所示：

Vue Router 跳转：

• Vue Router 跳转是通过调用路由实例的方法实现的，例如使用 router.push、router.replace 或 router.go。
• Vue Router 跳转是基于前端路由系统的，不会触发完整的页面刷新。只会更新应用程序中的组件和视图，从而实现单页面应用的无刷新路由跳转。
• Vue Router 跳转可以利用路由参数、导航守卫等功能，实现更灵活的页面跳转和导航逻辑。
• Vue Router 跳转可以实现组件的懒加载，按需加载所需的组件代码，提高页面加载性能。

location.href 跳转：

• location.href 是 JavaScript 中的原生属性，用于获取或设置当前页面的 URL。
• location.href 跳转会触发完整的页面刷新，类似于用户在浏览器中输入新的 URL 或点击链接进行导航。
• location.href 跳转会重新加载整个页面，包括重新请求资源、重新渲染页面和重置 JavaScript 环境等。
• location.href 跳转不能直接利用 Vue Router 的功能，无法使用路由参数、导航守卫等功能。

总结起来，Vue Router 跳转和 location.href 之间的主要区别在于页面刷新和功能扩展的能力。Vue Router 跳转实现了无刷新的单页面应用路由跳转，并提供了丰富的功能和生命周期钩子函数。而 location.href 跳转会触发页面的完整刷新，适用于直接导航到新的 URL 地址或需要进行完整页面加载的场景。选择使用哪种方式取决于具体的需求，以及是否需要利用 Vue Router 的功能和路由管理能力。

params和query的区别

在路由系统中，params 和 query 是两种常用的参数传递方式，它们在功能和用法上有一些区别。

Params（路由参数）：

• 功能：Params 是通过路由路径中的动态参数来传递数据的方式。它用于匹配动态路由路径的一部分，可以将参数作为占位符来定义路由。
• 示例：/user/:id
• 用法：
  • 在定义路由时，使用冒号（:）来指定参数的占位符。
  • 在组件中，通过 $route.params 对象来访问传递的参数。
• 示例代码：

  // 路由定义
  const routes = [
    {
      path: '/user/:id',
      name: 'User',
      component: UserComponent
    }
  ];
  
  // 组件中获取参数
  export default {
    created() {
      const userId = this.$route.params.id;
      console.log('User ID:', userId);
    }
  };
  

Query（查询参数）：

• 功能：Query 是通过 URL 中的查询字符串来传递数据的方式。它可以在路由路径后使用 ? 加上键值对的形式来传递参数。
• 示例：/user?id=123
• 用法：
  • 在定义路由时，不需要特别配置，可以直接在路由路径中使用查询参数。
  • 在组件中，通过 $route.query 对象来访问传递的参数。
• 示例代码：

  // 路由定义
  const routes = [
    {
      path: '/user',
      name: 'User',
      component: UserComponent
    }
  ];
  
  // 组件中获取参数
  export default {
    created() {
      const userId = this.$route.query.id;
      console.log('User ID:', userId);
    }
  };
  

区别总结：

• Params 是通过路由路径中的动态参数来传递数据，而 Query 是通过 URL 中的查询字符串来传递数据。
• Params 用于匹配动态路由路径的一部分，而 Query 可以在路由路径后添加键值对的形式传递参数。
• Params 需要在路由定义时配置占位符，而 Query 不需要特别配置，直接可以在路由路径中使用查询参数。
• 在组件中获取 Params 使用 $route.params，获取 Query 使用 $route.query。

根据具体的需求和场景，可以选择使用 Params 或 Query 来传递参数。Params 适合用于标识资源和路由导航，而 Query 适合用于筛选、过滤和可选参数。

Vue-router 导航守卫有哪些

Vue Router 提供了以下几种导航守卫：

1. 全局前置守卫 (beforeEach)：在路由切换之前被调用。

   • 功能：用于进行全局的前置验证、权限控制或跳转逻辑。
   • 示例：

     router.beforeEach((to, from, next) => {
       // 执行逻辑
       next();
     });
     

2. 全局解析守卫 (beforeResolve)：在路由被确认之前被调用，可以用于处理异步路由组件。

   • 功能：用于在路由被确认之前执行一些异步操作，确保路由组件及其依赖都被解析。
   • 示例：

     router.beforeResolve((to, from, next) => {
       // 执行逻辑
       next();
     });
     

3. 全局后置钩子 (afterEach)：在每次路由跳转之后被调用。

   • 功能：用于执行全局的后置逻辑，如页面滚动行为、埋点统计等。
   • 示例：

     router.afterEach((to, from) => {
       // 执行逻辑
     });
     

4. 路由独享的守卫 (beforeEnter)：在特定路由配置中定义的守卫。

   • 功能：用于在特定路由上定义独立的守卫逻辑，与全局守卫不同的是，仅应用于特定路由。
   • 示例：

     const routes = [
       {
         path: '/user',
         name: 'User',
         component: UserComponent,
         beforeEnter: (to, from, next) => {
           // 执行逻辑
           next();
         }
       }
     ];
     

5. 组件内的守卫 (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave)：在组件内部定义的守卫。

   • 功能：用于在组件内部定义特定路由的守卫逻辑，可以访问组件实例和组件的生命周期钩子。
   • 示例：

     export default {
       beforeRouteEnter(to, from, next) {
         // 执行逻辑
         next();
       },
       beforeRouteUpdate(to, from, next) {
         // 执行逻辑
         next();
       },
       beforeRouteLeave(to, from, next) {
         // 执行逻辑
         next();
       }
     };
     

这些导航守卫可以通过在路由配置中定义相应的钩子函数来实现。它们可以用于控制路由的访问权限、执行跳转逻辑、处理异步组件等。通过结合不同的导航守卫，可以实现灵活的路由控制和导航逻辑。
都看到这了，点个赞吧，嘿嘿