什么是 Vue Router？
Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 深度集成，可以快速构建单页面应用（SPA）和多页面应用（MPA）的前端路由。
Vue Router 可以帮助我们实现页面的无刷新跳转、嵌套路由、参数传递、路由拦截等功能，极大地简化了前端路由的开发和维护。
安装和使用 Vue Router
安装
通过 npm 安装 Vue Router：
npm install vue-router
使用
在 Vue 项目中引入并使用 Vue Router：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
路由配置
在实例化 Vue Router 时，需要传入一个 routes 数组，用来配置路由信息。每个路由配置对象必须包含 path 和 component 属性，分别用于指定路由路径和对应的组件。
下面是一个简单的路由配置示例：
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
路由跳转
Vue Router 提供了多种方式进行路由跳转，常用的有 <router-link> 组件和 router.push() 方法。
<router-link> 组件
<router-link> 是 Vue Router 提供的路由链接组件，它会自动根据配置生成正确的链接，并添加活动类。例如：
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
router.push() 方法
router.push() 方法用于在代码中进行路由跳转，例如：
// 通过名称跳转
router.push({ name: 'home' })
// 通过路径跳转
router.push('/about')
// 通过带参数的路径跳转
router.push({ path: '/user/123' })
// 通过命名的路由跳转
router.push({ name: 'user', params: { id: 123 }})
// 通过查询参数跳转
router.push({ path: '/about', query: { name: 'vue' }})
路由参数
我们可以通过路由参数传递数据，以实现动态路由功能。
动态路径参数
通过在路由路径中使用占位符来设置动态路径参数，例如：
const routes = [
{
path: '/user/:id',
component: User
}
]
在上面的示例中，/user/:id 中的 :id 即为动态路径参数，可以在 User 组件中通过 $route.params.id 获取动态参数的值。
查询参数
查询参数可以通过 router.push() 方法的 query 参数传递，也可以通过 $route.query 在组件中获取。
例如：
// 通过查询参数跳转
router.push({ path: '/about', query: { name: 'vue' }})
// 在组件中获取查询参数
this.$route.query.name
路由拦截
Vue Router 允许我们在跳转到某个路由之前进行拦截和处理。常见的路由拦截有 3 种方式：全局前置守卫、全局解析守卫和路由独享的守卫。
全局前置守卫
全局前置守卫通过 router.beforeEach() 方法注册，会在每次路由跳转之前触发。
router.beforeEach((to, from, next) => {
// to: 要跳转的路由对象
// from: 来源路由对象
// next: 调用该方法继续执行跳转，传递参数表示跳转的路径
// 可以在这里进行权限验证或其他处理
next() // 执行跳转
})
全局解析守卫
全局解析守卫通过 router.beforeResolve() 方法注册，会在每次路由跳转之前触发，也会在全局前置守卫之后触发。
router.beforeResolve((to, from, next) => {
// 在这里进行其他处理
next() // 执行跳转
})
路由独享的守卫
路由独享的守卫通过在路由配置对象中添加 beforeEnter 属性来指定。
const routes = [
{
path: '/about',
component: About,
beforeEnter: (to, from, next) => {
// 可以在这里进行权限验证或其他处理
next() // 执行跳转
}
}
]
小结
在 Vue.js 应用中使用 Vue Router 能极大地简化前端路由的开发和维护工作。本文简单介绍了 Vue Router 的安装和基本使用，以及常用的路由跳转和参数传递方式。此外，还介绍了三种常用的路由拦截方式：全局前置守卫、全局解析守卫和路由独享的守卫。通过学习和掌握 Vue Router，能够更加方便地开发出高质量的前端应用。
以上就是本文对 Vue 核心插件 Router 路由的详细解析，希望对您有所帮助！
本文来自极简博客，作者：浅笑安然，转载请注明原文链接：Vue 核心插件: Router 路由详解
