前端经典面试题合集, Vue Router 路由有哪些模式?各模式有什么区别?

Step 1

Q:: Vue Router 路由有哪些模式？各模式有什么区别？

A:: Vue Router 主要有三种模式：'hash' 模式、'history' 模式和 'abstract' 模式。 1. 'hash' 模式：使用 URL 的 hash（#）部分来模拟一个完整的 URL，hash 变化不会重新加载页面。优点是简单，兼容性好；缺点是 URL 丑陋，带有 # 符号。 2. 'history' 模式：利用 HTML5 History API 实现 URL 路径的变化（即没有 # 号）。优点是 URL 结构清晰；缺点是需要服务器配置支持（如 Nginx 或 Apache 配置），否则刷新会导致 404。 3. 'abstract' 模式：主要用于非浏览器环境，如 Node.js 服务器端渲染。

Step 2

Q:: 什么是 Vue Router 的懒加载？如何实现？

A:: Vue Router 的懒加载是指在需要的时候才加载某个路由对应的组件。通过动态 import 语法和 Webpack 的代码分割功能来实现。例如：

 
const Foo = () => import('./Foo.vue');
const routes = [
  { path: '/foo', component: Foo }
];
 

这样可以减小初始加载包的体积，提高首屏加载速度。

Step 3

Q:: 如何在 Vue Router 中实现导航守卫？

A:: Vue Router 提供了多种导航守卫，可以在路由进入前、进入后和离开时进行拦截或操作。主要有： 1. 全局守卫：router.beforeEach、router.beforeResolve、router.afterEach 2. 路由独享守卫：在路由配置中使用 beforeEnter 3. 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 例如，全局前置守卫：

 
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});