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

发布时间:2024年01月24日

面试 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!

?点赞?收藏?不迷路!?

文章来源:https://blog.csdn.net/qq_67358181/article/details/135821555
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。