Vue Router 面试题, 如何定义 Vue 的动态路由?如何获取传过来的动态参数?

Step 1

Q:: 如何定义 Vue 的动态路由？

A:: 在 Vue Router 中，动态路由的定义可以通过在路由路径中使用冒号（:）来标识动态片段。例如：

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

这样，/user/123 和 /user/456 都会匹配到相同的路由并加载相应的组件。

Step 2

Q:: 如何获取传过来的动态参数？

A:: 你可以通过 Vue 组件实例中的 this.$route.params 来获取动态参数。例如：

 
export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}
 

这样你就可以在组件的生命周期钩子中访问到传入的动态参数。

Step 3

Q:: 如何在路由中传递查询参数？

A:: 查询参数可以通过 URL 的查询字符串来传递。例如：/user?id=123。在 Vue Router 中，你可以通过 this.$route.query 来获取查询参数。例如：

 
export default {
  mounted() {
    console.log(this.$route.query.id)
  }
}
 

Step 4

Q:: 如何定义嵌套路由？

A:: 嵌套路由可以通过在父路由中定义子路由来实现。例如：

 
const routes = [
  { path: '/user/:id', component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]
 

这样 /user/123/profile 和 /user/123/posts 都会被匹配到相应的子组件。

Step 5

Q:: 如何进行导航守卫？

A:: Vue Router 提供了多种导航守卫，如全局守卫、路由独享守卫和组件内守卫。例如，全局前置守卫可以这样定义：

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

Step 1

Q:: 如何定义 Vue 的动态路由？

A:: 在 Vue 中，动态路由可以通过在路由配置中使用 :param 语法来定义。例如，/user/:id 就是一个动态路由，其中 :id 是一个动态参数。在实际代码中可以通过以下方式定义：

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

在这个配置中，当用户访问 /user/123 时，id 参数的值将会是 123。

Step 2

Q:: 如何获取传过来的动态参数？

A:: 在 Vue 组件中，可以通过 this.$route.params 来获取动态路由传递过来的参数。例如，如果定义了一个路径为 /user/:id 的动态路由，当用户访问 /user/123 时，可以通过以下代码获取 id 的值：

 
const userId = this.$route.params.id;
 

Step 3

Q:: 如何在 Vue 中使用嵌套路由？

A:: 嵌套路由是 Vue Router 中的一种机制，可以让不同的路由在同一页面中嵌套显示。嵌套路由可以通过在父级路由中定义 children 属性来实现，例如：

 
const routes = [
  { path: '/user/:id', component: User, children: [
    { path: 'profile', component: UserProfile },
    { path: 'posts', component: UserPosts }
  ] }
]
 

在这个例子中，/user/:id/profile 和 /user/:id/posts 都是嵌套在 /user/:id 路由下的子路由。

Step 4

Q:: 在 Vue Router 中如何进行导航守卫？

A:: 导航守卫是 Vue Router 提供的一种功能，允许在路由切换前后执行一些逻辑。可以通过 beforeEach、beforeEnter 或组件内的 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 等钩子函数实现。例如，beforeEach 用法如下：

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

这个守卫在每次路由切换前检查目标路由是否需要身份验证，如果需要而用户未认证，则重定向到登录页面。

Step 5

Q:: 如何在 Vue 中使用路由懒加载？

A:: 路由懒加载是一种优化 Vue 应用的技术，允许将路由组件按需加载，而不是在应用初始化时全部加载。可以通过动态导入语法来实现懒加载。例如：

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

在这个例子中，当用户访问 /about 路径时，About.vue 组件才会被加载。

Step 1

Q:: 如何定义 Vue 的动态路由？

A:: 在 Vue 中，动态路由是通过在路由路径中使用动态参数来定义的。例如：/user/:id 这个路由就是一个包含动态参数 id 的动态路由。id 可以是任何值，当访问 /user/123 时，id 的值为 123。动态路由可以通过 vue-router 来配置。例如：

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

这里的 :id 就是动态参数。

Step 2

Q:: 如何获取传过来的动态参数？

A:: 在组件内部，可以通过 this.$route.params 来访问动态路由参数。例如，如果你定义了一个路由 /user/:id，并且当前路径是 /user/123，那么在 UserComponent 组件中，可以通过 this.$route.params.id 来获取 id 的值，即 123。如果需要监听路由参数的变化，可以使用 watch 选项监测 $route 对象。

Step 3

Q:: 动态路由与懒加载如何结合使用？

A:: 在实际应用中，动态路由与懒加载通常结合使用，以提高应用的性能。懒加载可以通过 import 语法动态导入组件。例如：

 
const routes = [
  { path: '/user/:id', component: () => import('./components/UserComponent.vue') }
]
 

这样，当访问 /user/:id 路由时，才会加载对应的组件，这样可以减少首次加载时的包大小，提高应用的加载速度。