安装
Vue-Router 提供了多种安装方式，便于各种使用场景。
CDN 方式
https://unpkg.com/vue-router@4
这个很简单粗暴，用 script 引入进来就可以使用了。然后你可能会问，接下来呢？
接下来也是很简单的，我们可以仿照 工程化开发的方式来使用，比如这里介绍的方式。
https://www.jianshu.com/p/f7a8b6907cc2
npm
npm install vue-router@4
引用
一般我们都是用工程化的方式来做项目，在 vue-cli 和 vite 建立的项目里面， Router 的使用方式基本相同。
都是先用 npm 安装，然后在 router/index.js 里面配置一下路由，最后再 main 里面挂载即可。
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 路由
import store from './store-ds' // 轻量级状态
const app = createApp(App)
app.use(router) // 路由
.use(store) // 简易状态
.mount('#app')
基础设置
一般是在 router/index.js 做设置，比如这样：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/home.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/base',
name: 'base',
component: () => import('../views/baseControl.vue') // 动态路由
},
{
path: '/form',
name: 'form',
component: () => import('../views/form.vue')
}
]
// 创建路由
const router = createRouter({
history: createWebHistory(),
// base: '/blog/', // 设置根目录
routes
})
console.log('创建路由——————', router)
export default router
路由的内容：
设置的路由
routes 数组形式，设置各种路由的各种细节
createRouter 建立一个插件，便于挂载
export default router 输出实例。
addRouter 可以动态添加路由
beforeEach 全局前置守卫
beforeResolve 全局解析守卫
afterEach 全局后置钩子
beforeRouteEnter 进入组件 （没有找到）
beforeRouteUpdate 组件内改变路由参数
beforeRouteLeave 离开组件
在 option API 里面可以使用 beforeRouteEnter，但是在 setup 里面只能找到 beforeRouteUpdate 和 beforeRouteLeave 但是却找不到 beforeRouteEnter 。
可能是因为 beforeRouteEnter 的 触发时机要比 setup 还要早吧。
