vue router 是什么

Vue Router 是 Vue.js 的官方路由管理器，它用于创建单页面应用 (SPA) 的路由。以下是 Vue Router 的几个核心功能：1、定义应用的路径和组件映射，2、支持嵌套路由，3、支持动态路由匹配，4、提供导航守卫，5、支持路由重定向和别名。

一、定义应用的路径和组件映射

Vue Router 允许你通过配置对象定义路径和其对应的组件。每个路径（或称为路由）都会映射到一个特定的组件，当用户访问该路径时，相应的组件会被渲染。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]
const router = new VueRouter({
  routes
})

这样的配置使得 Vue 应用可以根据用户访问的 URL 动态展示不同的内容。这种方式不仅提高了应用的用户体验，还减少了服务器的负担。

二、支持嵌套路由

嵌套路由允许你在一个主组件中嵌套多个子组件。这对于组织复杂的应用非常有用。例如，假设我们有一个用户页面，其中包含用户的个人信息和设置：

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

在这个例子中，当用户访问 /user/123/profile 时，UserProfile 组件将会被渲染到 User 组件的子视图中。

三、支持动态路由匹配

动态路由匹配允许你定义带有参数的路由。例如，你可以定义一个用户详情页面，其路径包含用户的 ID：

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

在组件中，你可以通过 this.$route.params.id 访问这个 ID。这使得你的应用可以处理动态数据，并根据不同的参数展示不同的内容。

四、提供导航守卫

导航守卫允许你在路由切换前后执行一些逻辑操作。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫三种方式。例如，假设你需要在用户访问某个页面前进行身份验证：

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

这种方式确保了用户在未登录的情况下无法访问特定页面，从而提高了应用的安全性。

五、支持路由重定向和别名

重定向和别名功能允许你更灵活地管理路由。例如，假设你想将 /home 路径重定向到 /：

const routes = [
  { path: '/home', redirect: '/' }
]

别名则允许你为同一个路径定义多个访问方式：

const routes = [
  { path: '/about-us', component: About, alias: '/about' }
]

这种方式提高了应用的灵活性和用户体验，使得用户可以通过多种方式访问同一个页面。

总结

Vue Router 是一个功能强大且灵活的路由管理器，它通过定义路径和组件映射、支持嵌套路由、动态路由匹配、导航守卫以及路由重定向和别名等功能，极大地简化了单页面应用的开发过程。通过合理利用这些功能，你可以创建出更加高效、用户体验更好的 Vue 应用。为了更好地理解和应用 Vue Router，建议你深入学习其文档，并在实际项目中不断实践和优化。