1.安装
npm install vue-router@4/yarn add vue-router@4
2.跳转方式
router-link （会向 history 添加新记录） this.$router.push （不会向 history 添加新记录） this.$route 路由信息对象 params/query 路由参数 在setup函数中 使用useRouter useRoute函数 redirect 重定向
3.导航守卫
- （1）全局前置守卫
router.beforeEach((to,from)=>{}) to： 即将要进入的目标 from：当前导航正要离开的路由 next()
验证用户身份时重定向到登陆页面案例 router.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() })
- （2）全局解析守卫
router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。
- （3）全局后置钩子
这些钩子不会接受 next 函数也不会改变导航本身。它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用 router.afterEach
- （4）路由独享的守卫
beforeEnter 守卫 只在进入路由时触发`
4.动态路由
两个路由函数实现 router.addRoute() router.removeRoute() 如果新增加的路由与当前位置相匹配，就需要router.push()或router.replace()手动导航
5.查看现有路由
router.hashRoute() 检查路由是否存在 router.getRoutes() 获取一个包含所有路由记录的数组
