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