前端经典面试题合集, Vue Router 的 $route 和 $router 对象有什么区别?

Step 1

Q:: Vue Router 的 $route 和 $router 对象有什么区别？

A:: 在 Vue Router 中，$route 和 $router 是两个经常被使用的对象。$route 对象包含当前激活的路由信息，包括路径、参数、查询对象等。而 $router 对象是 Vue Router 实例本身，包含了路由的全局配置和导航方法。简单来说，$route 是一个只读对象，反映当前的路由状态，而 $router 是一个可用于编程式导航和全局操作的对象。

Step 2

Q:: 如何在 Vue Router 中实现路由守卫？

A:: 在 Vue Router 中，可以通过 beforeEach、beforeResolve 和 afterEach 路由守卫来控制导航。beforeEach 在每次导航前触发，适用于全局前置守卫。beforeResolve 在导航被确认之前触发，可以用于更细粒度的控制。afterEach 在导航完成后触发，用于执行一些收尾工作。示例代码：

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

Step 3

Q:: 如何在 Vue 中动态加载路由？

A:: 动态加载路由通常用于大型应用中，以减少初始加载时间。可以通过 Vue Router 的异步组件加载特性来实现。示例代码：

 
const User = () => import('@/components/User.vue');
const router = new VueRouter({
  routes: [
    { path: '/user', component: User }
  ]
});