一、路由的定义
Vue路由是指在使用Vue.js框架构建的单页面应用程序（SPA）中，管理和控制页面视图切换的一种机制。它是Vue.js生态系统中的一个重要组成部分，通过Vue Router这个官方的路由管理器来实现。Vue路由允许开发者定义多个路由规则，每个路由规则都对应一个组件，当用户访问特定的URL时，Vue Router会根据这些规则动态地将对应的组件渲染到视图中，从而实现无刷新的页面跳转和数据更新。
具体来说，Vue路由的定义可以如下：
Vue路由是Vue Router提供的一种用于单页面应用程序的路径到组件的映射系统。它允许开发者为不同的路径定义对应的组件，并在用户导航到这些路径时，自动加载和渲染相应的组件。Vue路由通过维护一个路由视图历史记录，支持前进、后退等导航操作，同时还提供了路由守卫等高级功能，以实现细粒度的路由控制和安全检查。
二、vue-router 使用
1，安装 Vue Router
cs
npm install vue-router
# 或者
yarn add vue-router2，创建路由实例导入 Vue
javascript
//创建路由器对象，以及管理路由器配置
//引入一个函数
import {createRouter,createWebHistory,createWebHashHistory} from "vue-router";3，定义路由
定义一些路由组件，然后创建路由配置数组，每个路由映射一个组件
javascript
const routes = [
{
path:"/about",
component :()=>import("@/views/About.vue"),
name:"about",
}
]4,创建路由器实例并传递routes
javascript
//创建路由器对象
const router= createRouter({
history:createWebHistory(process.env.BASE_URL),
routes:routes,
linkActiveClass:'active',
})5,创建和挂载根实例
javascript
createApp(App).use(router).mount('#app')6,在Vue组件中使用<router-view/>和<router-link/>
在你的应用组件（通常是App.vue）中使用<router-view/>作为路由组件的出口，使用<router-link/>作为导航链接。
html
<router-link to="/about">about</router-link>
<router-view></router-view>三、基本路由配置
一个基本的路由配置包含path和component属性，分别代表路由的路径和要渲染的组件。
javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home', // 可选，给路由命名
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})嵌套路由
嵌套路由用于在父组件内部渲染子组件。
javascript
{
path: '/parent',
component: Parent,
children: [
{
path: 'child',
component: Child
}
]
}路由重定向
路由重定向可以通过redirect属性实现。
javascript
{
path: '/home',
redirect: '/'
}路由别名
别名可以给同一个组件定义多个路径。
javascript
{
path: '/about',
component: About,
alias: '/info'
}四、路由守卫
在Vue.js中，路由守卫（Route Guards）是用来通过路由系统的钩子函数来控制导航流程的一种机制。它们可以在路由发生变化时执行一些代码，比如身份验证、权限检查、页面访问统计等。
全局守卫
全局守卫会影响所有路由的变化。
1，beforeEach: 在路由跳转前被调用，接收三个参数：to（即将进入的目标路由对象）、from（当前导航正要离开的路由对象）、next（一个函数，用于解析这个钩子）。
javascript
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
// 必须调用 next() 方法来解析钩子
next()
})2，beforeResolve: 在所有组件内守卫和异步路由组件被解析之后，导航被确认之前被调用。
javascript
router.beforeResolve((to, from, next) => {
// ...
next()
})3，afterEach: 在路由跳转后被调用，它没有 next 函数，也不会改变导航本身。
javascript
router.afterEach((to, from) => {
// ...
})路由独享的守卫
可以在路由配置上直接定义beforeEnter守卫。
javascript
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
next()
}
}
]
})组件内的守卫
可以在组件内部定义以下守卫：
1，beforeRouteEnter: 在路由进入该组件的对应路由之前被调用，不能访问组件实例this，因为守卫执行前组件实例还没被创建。
javascript
beforeRouteEnter (to, from, next) {
// 不能访问 `this`
next(vm => {
// 通过 `vm` 访问组件实例
})
}2，beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用。
javascript
beforeRouteUpdate (to, from, next) {
// 可以访问组件实例 `this`
next()
}3，beforeRouteLeave: 在导航离开该组件的对应路由时被调用。
javascript
beforeRouteLeave (to, from, next) {
// 可以访问组件实例 `this`
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}在使用路由守卫时，请确保调用next()方法，否则路由导航会被阻塞。如果调用next(false)，则取消当前的导航；如果调用next('/')或者next({ path: '/' })，则导航到不同的位置。在beforeRouteEnter守卫中，next可以接收一个回调函数，这个回调函数会在路由解析完成并且组件实例被创建之后执行。