Vue Router 面试题, Vue Router 的组件内路由钩子有哪些?分别在什么时机调用?

Step 1

Q:: Vue Router 的组件内路由钩子有哪些？分别在什么时机调用？

A:: Vue Router 提供了一些组件内的路由钩子函数，用于在路由发生变化时执行特定逻辑。这些钩子包括：

1. beforeRouteEnter：在渲染该组件的对应路由被确认前调用。无法访问 this，因为组件实例还没被创建。 2. beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。例如，对于一个动态参数的路由 /foo/:id，在跳转到 /foo/2 时，组件会被复用。此钩子可以访问 this。 3. beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问 this。通常用于提示用户在离开前保存更改。

Step 2

Q:: 如何在 Vue Router 中定义和使用动态路由？

A:: 动态路由通过在路由路径中使用冒号 : 进行定义。例如：

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

在组件内，可以通过 this.$route.params.id 访问动态参数 id。

Step 3

Q:: Vue Router 中的导航守卫有哪些？分别在什么时机调用？

A:: Vue Router 提供了多种导航守卫：

1. 全局守卫： - router.beforeEach：全局前置守卫，在每次导航前调用。 - router.afterEach：全局后置守卫，在每次导航后调用。 2. 路由独享守卫：在路由配置中定义的守卫，只对特定路由生效。 3. 组件内守卫：包括 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave，在特定组件内生效。

Step 4

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

A:: 路由懒加载是指在需要时才加载路由对应的组件，提高应用性能。可以使用动态 import 语法实现：

 
const routes = [
  { path: '/about', component: () => import('@/components/About.vue') }
];
 

Step 5

Q:: 如何在 Vue Router 中实现路由的重定向和别名？

A:: 可以在路由配置中使用 redirect 和 alias 选项实现重定向和别名：

 
const routes = [
  { path: '/home', redirect: '/main' },
  { path: '/main', component: Main },
  { path: '/alias-home', alias: '/home', component: Main }
];
 

Step 1

Q:: Vue Router 的组件内路由钩子有哪些？分别在什么时机调用？

A:: Vue Router 提供了组件内的导航守卫钩子，用于在不同的路由状态下执行特定的逻辑。这些钩子包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。 1. beforeRouteEnter(to, from, next)：在路由进入前调用，此钩子不能直接访问组件实例（因为组件还没被创建）。可以通过 next 回调来延迟对组件实例的访问。 2. beforeRouteUpdate(to, from, next)：当路由改变但是组件被复用时调用。常用于同一个组件在不同路径下展示不同数据的场景。 3. beforeRouteLeave(to, from, next)：在导航离开该组件的对应路由时调用，可以用于阻止导航或进行一些清理工作。

Step 2

Q:: 如何在 beforeRouteEnter 中访问组件实例？

A:: 由于 beforeRouteEnter 钩子在组件实例创建之前被调用，无法直接访问 this。可以通过在 next 函数中传递一个回调函数，该回调函数在导航确认后被调用，并接收组件实例作为参数。例如：

 
beforeRouteEnter(to, from, next) {
  next(vm => {
    // 这里可以访问组件实例 'vm'
  });
}
 

Step 3

Q:: beforeRouteLeave 钩子有什么典型应用场景？

A:: beforeRouteLeave 通常用于在用户离开当前页面之前执行一些逻辑，例如确认用户是否保存了未保存的表单数据，或者弹出确认对话框以防止意外导航。举例：

 
beforeRouteLeave (to, from, next) {
  const answer = window.confirm('你确定要离开吗？未保存的更改可能会丢失。')
  if (answer) {
    next()
  } else {
    next(false)
  }
}
 

Step 1

Q:: Vue Router 的组件内路由钩子有哪些？分别在什么时机调用？

A:: Vue Router 的组件内路由钩子主要有以下几种：1. beforeRouteEnter：在进入路由之前调用，此时组件实例还未被创建；2. beforeRouteUpdate：在当前路由改变时调用，可以访问组件实例；3. beforeRouteLeave：在离开路由之前调用，常用于阻止用户离开当前页面。这些钩子函数主要用于在路由变化时执行特定逻辑，如权限验证、数据获取、确认用户操作等。

Step 2

Q:: 如何在 Vue 中使用 Vue Router 的导航守卫？

A:: Vue Router 提供全局守卫、路由独享守卫和组件内守卫三种方式。全局守卫如 router.beforeEach 可以在每次路由切换时触发，用于全局的权限控制。路由独享守卫如 beforeEnter 定义在路由配置中，只在特定路由匹配时触发。组件内守卫如 beforeRouteEnter 用于在特定组件内处理路由相关逻辑。这些守卫用于拦截路由跳转，并在跳转前执行如权限检查、日志记录等操作。

Step 3

Q:: Vue Router 中的动态路由匹配是如何实现的？

A:: 动态路由匹配通过在路由路径中使用动态参数（如 :id）来实现，匹配时根据参数的实际值进行匹配。动态参数可以通过 this.$route.params 访问，常用于展示用户详情页、文章详情页等需要根据 ID 或其他标识符动态渲染的页面。