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

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

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

  • 对Vue-Router的理解
  • Vue路由懒加载的实现
  • 路由的hash和history模式
  • 如何获取页面的hash变化
  • 路由中`$route `和`$router `的区别
  • 如何定义动态路由?如何获取传过来的动态参数
  • Vue-router 路由钩子在生命周期的体现
  • Vue-router跳转和location.href有什么区别
  • params和query的区别
  • Vue-router 导航守卫有哪些

对Vue-Router的理解

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

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

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

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

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

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

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

  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 模式下,可以使用 pushStatereplaceState 方法来改变 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 是一个用于进行路由导航的对象。
    • 它提供了一些方法,如 pushreplacego,用于在应用程序中进行路由跳转、导航。
    • $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 钩子函数接收三个参数:tofromnext。通过 to.params.idfrom.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.pushrouter.replacerouter.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();
        }
      };
      

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

你可能感兴趣的:(前端,前端,vue.js,javascript)