安装

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 还要早吧。