面试题3 vue-router

vue-router相关面试题解答如下：

• 常用实例方法

  router.push(location)：导航到新路由，支持路径、对象或命名路由形式。

  // 路径形式this.$router.push('/home')// 对象形式this.$router.push({ path: '/home' })// 命名路由 + 参数this.$router.push({ name: 'user', params: { userId: '123' } })

  router.replace(location)：替换当前路由，不留下历史记录。

  router.go(n)：前进或后退n步（类似浏览器历史操作）。

• 参数传递方式

  动态路由参数：通过path: '/user/:id'匹配，组件内通过this.$route.params.id获取。

  查询参数：通过?key=value形式传递，组件内通过this.$route.query.key获取。

  props传递：在路由配置中将params或query映射为组件的props，提高解耦性。

• 全局钩子

  beforeEach：全局前置守卫，每次路由跳转前触发。

  afterEach：全局后置钩子，路由跳转完成后触发。

  beforeResolve：全局解析守卫，在beforeEach之后、组件内守卫之前触发。

• 路由独享钩子

  beforeEnter：在路由配置中定义，仅对当前路由生效。

  { path: '/user', component: User, beforeEnter: (to, from, next) => { /* ... */ }}

• 组件内钩子

  beforeRouteEnter：进入组件前触发（无法访问this，可通过next(vm => {})访问）。

  beforeRouteUpdate：路由参数变化时触发（如从/user/1跳转到/user/2）。

  beforeRouteLeave：离开组件时触发（常用于表单未保存提醒）。

• 动态路由定义在路径中使用:定义动态字段，例如path: '/user/:id'可匹配/user/123、/user/abc等。

  { path: '/user/:id', component: User}

• 参数获取

  通过this.$route.params.id获取当前路由的动态参数。

  若需响应参数变化，可在组件内监听$route对象或使用beforeRouteUpdate钩子。

• 使用场景

  用户详情页（如/user/1、/user/2）。

  分类商品页（如/category/electronics）。

• 配置方式在父路由的children属性中定义子路由，子路由的path无需以/开头（相对于父路径）。

  const routes = [ { path: '/me', component: Me, children: [ { path: 'collection', component: Collection }, // 实际路径为 /me/collection { path: 'trace', component: Trace } ] }]

• 嵌套渲染父组件需包含<router-view>作为子路由的出口，子组件内容会在此处渲染。

  <!-- Me.vue --><div> <h1>个人中心</h1> <router-view></router-view> <!-- 子路由内容在此渲染 --></div>

• 基本功能声明式导航组件，替代<a>标签，避免页面刷新。

  <router-link to="/home">首页</router-link>

• 常用属性

  to：目标路由路径（支持字符串或对象形式）。

  tag：指定渲染为其他标签（如tag="li"）。

  replace：使用replace而非push导航。

  active-class：激活状态的自定义类名（默认router-link-active）。

  exact：精确匹配模式（仅当路径完全一致时激活）。

• 懒加载意义减少首屏加载时间，按需加载路由组件，避免打包后文件过大。

• 实现方式使用动态import()语法或Webpack的require.ensure（推荐前者）。

  // 懒加载路由配置const routes = [ { path: '/home', component: () => import('@/views/Home.vue') // 动态导入 }]

• 注意事项

  打包后直接运行index.html可能报错，需在webpack.prod.conf.js中配置publicPath: './'。

  懒加载组件需确保路径正确，避免资源404。

• Hash模式（默认）

  路径格式：

  http://example.com/#/home
  。

  特点：依赖URL的hash部分（#后内容），刷新时不会请求服务器。

  适用场景：兼容性要求高或无法配置服务器的项目（如GitHub Pages）。

• History模式

  路径格式：

  http://example.com/home
  （无#）。

  特点：依赖HTML5 History API，需服务器配置支持（如返回index.html避免404）。

  适用场景：对URL格式要求严格的现代项目（如企业官网）。