Vue 路由中 `routes` 配置项各个属性的详细讲解

1. path

• 说明：字符串，表示路由的路径。
• 细节：
  • 路径可以包含动态段，例如 /user/:id，其中 :id 是一个动态参数，用于捕获 URL 中的值并传递给组件。
  • 支持通配符，如 *，用于匹配所有路径。
  • 路径可以是绝对路径（以 / 开头）或相对路径（不以 / 开头，通常用于子路由）。
• 示例：

  { path: '/home', component: Home }
  { path: '/user/:id', component: User }
  { path: '*', redirect: '/404' }
  

2. component

• 说明：指定该路由对应的组件。
• 细节：
  • 可以直接传入组件对象，或者使用函数动态加载组件（如使用 import() 进行懒加载）。
  • 当使用懒加载时，可以通过 /* webpackChunkName: "chunk-name" */ 注释来指定打包后的文件名。
• 示例：

  // 直接传入组件对象
  { path: '/home', component: Home }
  
  // 使用函数动态加载组件
  { path: '/about', component: () => import('./views/About.vue') }
  
  // 指定打包后的文件名
  { path: '/user', component: () => import(/* webpackChunkName: "user" */ './views/User.vue') }
  

3. name

• 说明：为路由指定一个名称。
• 细节：
  • 在进行路由跳转时，可以使用名称来代替路径，这样即使路径发生变化，也不需要修改跳转逻辑。
  • 名称在项目中应该是唯一的。
• 示例：

  { path: '/user/:id', name: 'user', component: User }
  // 跳转时可以使用名称
  this.$router.push({ name: 'user', params: { id: 123 }})
  

4. redirect

• 说明：重定向配置，当用户访问该路由时，会自动跳转到指定的路径或路由。
• 细节：
  • 可以是一个字符串，表示跳转的目标路径。
  • 也可以是一个对象，包含 path、name 等属性，用于更复杂的跳转逻辑。
  • 支持函数形式，根据当前路由动态决定跳转目标。
• 示例：

  // 字符串形式
  { path: '/a', redirect: '/b' }
  
  // 对象形式
  { path: '/a', redirect: { name: 'foo' } }
  
  // 函数形式
  { path: '/dynamic-redirect/:id?', redirect: to => {
      const { hash, params, query } = to
      if (query.to === 'foo') {
        return { path: '/foo', query: null }
      }
      if (hash === '#baz') {
        return { name: 'baz', hash: '' }
      }
      if (params.id) {
        return '/with-params/:id'
      } else {
        return '/bar'
      }
    }
  }
  

5. alias

• 说明：为路由设置一个或多个别名。
• 细节：
  • 当用户访问别名路径时，URL 会保持为别名路径，但路由匹配则为原路径对应的路由。
  • 可以是一个字符串或字符串数组。
• 示例：

  { path: '/home', component: Home, alias: '/dashboard' }
  { path: '/user', component: User, alias: ['/profile', '/account'] }
  

6. children

• 说明：定义嵌套路由。
• 细节：
  • 是一个数组，包含子路由的配置对象。
  • 子路由的路径是相对于父路由的路径的。
  • 父组件中需要使用 来渲染子组件。
• 示例：

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

7. props

• 说明：为路由组件传递属性。
• 细节：
  • 可以是布尔值、对象或函数。
  • 当为布尔值 true 时，会将 params 作为 props 传递给组件。
  • 当为对象时，会将对象中的属性作为 props 传递。
  • 当为函数时，可以动态返回 props。
• 示例：

  // 布尔值形式
  { path: '/user/:id', component: User, props: true }
  
  // 对象形式
  { path: '/user', component: User, props: { isAdmin: true } }
  
  // 函数形式
  { path: '/user/:id', component: User, props: route => ({ userId: route.params.id }) }
  

8. meta

• 说明：为路由添加元信息。
• 细节：
  • 可以是一个对象，包含任意自定义的属性。
  • 常用于存储需要在路由守卫中使用的权限信息、标题等。
• 示例：

  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, role: 'admin' }
  }
  

9. beforeEnter

• 说明：路由进入前的守卫。
• 细节：
  • 是一个函数，在进入该路由之前被调用。
  • 可以用于进行权限验证等操作。
  • 函数的参数为 to、from、next，其中 next 用于控制是否放行。
• 示例：

  {
    path: '/special',
    component: Special,
    beforeEnter: (to, from, next) => {
      if (userHasPermission) {
        next()
      } else {
        next('/login')
      }
    }
  }
  

10. caseSensitive

• 说明：是否区分大小写。
• 细节：
  • 默认值为 false，即不区分大小写。
  • 当设置为 true 时，路径会区分大小写。
• 示例：

  { path: '/admin', component: Admin, caseSensitive: true }
  

11. pathToRegexpOptions

• 说明：配置路径到正则表达式的选项。
• 细节：
  • 可以是一个对象，用于自定义路径解析的规则。
  • 常用于需要对路径进行特殊处理的场景。
• 示例：

  {
    path: '/user/:id',
    component: User,
    pathToRegexpOptions: { sensitive: true, strict: true }
  }