当前位置：首页 > article >正文

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

article 2024/11/17 15:31:23

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

前端高频面试题--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 的一些理解：

路由映射：
Vue Router 允许我们在应用程序中定义多个路由，并将每个路由与对应的组件进行映射。通过配置路由映射，可以在不同的 URL 下加载不同的组件，实现单页面应用的多页面效果。
嵌套路由：
Vue Router 支持嵌套路由，这意味着我们可以在组件中定义子路由。通过嵌套路由，我们可以构建更复杂的应用程序结构，使得页面的组织更加清晰和灵活。
路由导航：
Vue Router 提供了丰富的导航方法，如 push、replace 和 go，用于在应用程序中进行路由导航。通过调用这些方法，我们可以在组件内部进行路由跳转，实现页面之间的切换和导航。
路由参数：
Vue Router 支持动态路由参数，通过在路由路径中使用冒号（:）来指定参数的占位符。这使得我们可以定义带有动态参数的路由，并在组件中获取和使用这些参数。
导航守卫：
Vue Router 提供了导航守卫钩子函数，如 beforeEach、beforeResolve 和 afterEach，用于在路由导航过程中执行一些操作。通过导航守卫，我们可以在路由跳转之前或之后执行逻辑，例如验证用户权限、加载数据等。
懒加载：
Vue Router 支持组件的懒加载，即在需要时才加载组件的代码。这可以提高应用程序的性能，减少初始加载时间，并根据需要动态加载组件。
路由模式：
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 模式，它们之间有一些区别。

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

使用 window.onhashchange 事件：
```
window.onhashchange = function() {
  const newHash = window.location.hash;
  console.log('Hash changed:', newHash);
};
```
上述代码会在页面的 hash 变化时触发 onhashchange 事件，并在事件处理函数中获取新的 hash 值。
使用 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 是两个不同的对象，它们的作用和功能略有不同。

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

定义动态路由：
在路由配置中，使用冒号（:）来指定动态参数的占位符。例如，如果要定义一个带有动态参数的路由，可以使用以下方式：
```
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent
  }
];
```
在上述示例中，/user/:id 定义了一个动态路由，:id 是一个占位符，表示该位置可以匹配任意值作为参数。
获取传递的动态参数：
通过 $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 中，路由钩子函数的执行与组件的生命周期函数有一定的关联。路由钩子函数会在组件的生命周期中的特定阶段被触发调用，以执行相应的逻辑。下面是一些常用的路由钩子函数及其在组件生命周期中的体现：

beforeEach：
- 生命周期体现：在组件创建之前调用。
- 功能：在每次路由跳转之前执行一些逻辑，如验证用户权限、登录状态检查等。
- 示例：
```
router.beforeEach((to, from, next) => {
  // 执行逻辑
  next();
});
```
beforeRouteEnter：
- 生命周期体现：在组件被创建和添加到路由之前调用。
- 功能：在组件进入路由之前执行一些逻辑，如预加载数据。
- 示例：
```
export default {
  beforeRouteEnter(to, from, next) {
    // 执行逻辑
    next();
  }
};
```
beforeRouteUpdate：
- 生命周期体现：在路由参数发生变化时，组件复用之前调用。
- 功能：在组件复用之前执行一些逻辑，如根据新的路由参数更新组件的状态或重新加载数据。
- 示例：
```
export default {
  beforeRouteUpdate(to, from, next) {
    // 执行逻辑
    next();
  }
};
```
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 提供了以下几种导航守卫：

全局前置守卫 (beforeEach)：在路由切换之前被调用。
- 功能：用于进行全局的前置验证、权限控制或跳转逻辑。
- 示例：
```
router.beforeEach((to, from, next) => {
  // 执行逻辑
  next();
});
```
全局解析守卫 (beforeResolve)：在路由被确认之前被调用，可以用于处理异步路由组件。
- 功能：用于在路由被确认之前执行一些异步操作，确保路由组件及其依赖都被解析。
- 示例：
```
router.beforeResolve((to, from, next) => {
  // 执行逻辑
  next();
});
```
全局后置钩子 (afterEach)：在每次路由跳转之后被调用。
- 功能：用于执行全局的后置逻辑，如页面滚动行为、埋点统计等。
- 示例：
```
router.afterEach((to, from) => {
  // 执行逻辑
});
```

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

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

示例：

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

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

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

示例：

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