Vue Router 是 Vue.js 官方的路由管理器。它使用了 Vue.js 的生成器模式来构建一个全面的 API，并以插件的方式进行安装和注册。Vue Router 提供了一种简单而强大的方式来组织、管理和控制页面之间的导航。
Vue Router 的核心概念包括路由器（Router）、路由（Route）和导航守卫（Navigation Guards）。它允许我们通过定义并配置路由器来注册路由，并使用导航守卫来控制页面之间的导航行为。
一、路由器（Router）
在 Vue Router 中，我们需要首先创建一个路由器实例。可以使用 Vue Router 提供的 Vue.use() 方法将路由器挂载到 Vue 实例上。以下是一个简单的例子：
```javascript
import Vue from vue
import VueRouter from vue-router
// 安装路由器插件
Vue.use(VueRouter)
// 创建路由器实例
const router = new VueRouter({
routes: [
// 配置路由规则
{
path: /
component: Home
}
{
path: /about
component: About
}
]
})
// 将路由器实例挂载到 Vue 实例
new Vue({
router
render: h => h(App)
}).$mount(#app)
```
在上面的例子中，我们首先引入 VueRouter，并使用 Vue.use() 方法来安装它。然后，我们创建一个路由器实例，并通过 routes 属性配置了两个路由规则。*，我们将路由器实例和根组件挂载到 Vue 实例上。
二、路由（Route）
在 Vue Router 中，路由（Route）代表了一个路由规则匹配到的路由信息。在每次导航时，路由器都会根据当前的 URL 来匹配路由规则，并根据匹配结果创建一个路由实例。
通过路由实例，我们可以获取到当前路由的路径、参数、查询字符串、哈希值等等。我们还可以使用路由实例提供的方法来进行导航、获取其它路由信息等操作。
以下是一个简单的例子：
```javascript
// 当前路径为 /about?id=1
console.log(this.$route.path) // 输出: /about
console.log(this.$route.params.id) // 输出: 1
console.log(this.$route.query) // 输出: { id: 1 }
// 导航到新的路由
this.$router.push(/home)
// 获取指定路由的信息
const route = this.$router.resolve(/about?id=2)
console.log(route)
```
在上面的例子中，我们通过 $route 属性来访问当前路由的信息。其中，path 属性代表当前路由的路径，params 属性代表当前路由的参数，query 属性代表当前路由的查询字符串。
我们还可以通过 $router.push() 方法进行导航操作。在这个例子中，我们将路由导航到了 /home。
*，我们使用 $router.resolve() 方法来获取指定路径的路由信息，并将结果输出到控制台。
三、导航守卫（Navigation Guards）
导航守卫是 Vue Router 提供的一种机制，用于控制页面之间的导航行为。通过使用导航守卫，我们可以在路由发生变化之前或之后执行一些逻辑。
Vue Router 提供了多种导航守卫，包括全局导航守卫、路由独享的守卫和组件内的守卫。每种导航守卫都提供了不同的钩子函数，在特定的时机触发。
以下是一个简单的例子：
```javascript
// 全局前置守卫
router.beforeEach((to
from
next) => {
console.log(Global beforeEach)
next()
})
// 全局解析守卫
router.beforeResolve((to
from
next) => {
console.log(Global beforeResolve)
next()
})
// 全局后置守卫
router.afterEach((to
from) => {
console.log(Global afterEach)
})
// 路由独享的守卫
{
path: /
component: Home
beforeEnter: (to
from
next) => {
console.log(Route beforeEnter)
next()
}
}
// 组件内的守卫
{
path: /about
component: About
beforeRouteEnter(to
from
next) {
console.log(Component beforeRouteEnter)
next()
}
beforeRouteUpdate(to
from
next) {
console.log(Component beforeRouteUpdate)
next()
}
beforeRouteLeave(to
from
next) {
console.log(Component beforeRouteLeave)
next()
}
}
```
在上面的例子中，我们定义了全局的前置守卫（beforeEach）、解析守卫（beforeResolve）、后置守卫（afterEach），以及路由独享的守卫（beforeEnter）和组件内的守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）。
通过使用这些导航守卫，我们可以在路由发生变化之前或之后执行一些逻辑。例如，在全局前置守卫中可以进行权限验证，而在组件内的守卫中可以进行路由切换前后的数据处理。
总结
Vue Router 是一个非常强大且易于使用的路由管理器。它提供了一种简单而强大的方式来组织、管理和控制页面之间的导航，同时还支持导航守卫等高级功能。
通过使用 Vue Router，我们可以轻松地实现 SPA（单页面应用程序），提升用户体验和开发效率。无论是构建简单的网站还是复杂的应用程序，Vue Router 都是一个强大的工具。