vue3中怎么使用路由？与vue2路由的区别？vuerouter方法总结大全

　　1：什么是路由？
　　1：组件和url路径的映射关系。
　　2：前端最初是一个地址对应的一个页面，地址改变整个页面刷新、页面改变就是组件的切换、后面有了ajax，实现了局部刷新。
　　3：单页面：不刷新页面的情况下局部更新。缺点：首次加载太多，初次进入慢。2：什么是前端路由？什么是前端渲染？
　　后端返回的是json数据，前端根据数据去构建html页面、后端渲染直接返回的是html页面3：路由实现思路？
　　拦截不让跳转、监听url变化展示对应的组件、前端维护路由规则4：安装方法？npm install vue-router@4 yarn add vue-router@45：怎么使用？Go to Home 
　　1：router-link 呈现的a链接、没有使用a标签是为了可以在不重新加载页面的情况下更改url
　　2：router-view 路由匹配的渲染结果、匹配对应的组件
　　3：跳转和a链接href的区别？ 是否刷新页面跳转6：具体使用方法？
　　1：新建路由文件router.js 创建路由实例 然后在routes配置
　　2：main中引入新建这个路由文件 创建实例完成并在main.js挂载根实例
　　3：详细配置main.js router.js 7：setup函数中怎么访问路由？
　　1：请调用useRouter或useRoute函数
　　2：因为setup中没有this的、所以不能直接像vue2中访问this.$router
　　3：this.$router与createRouter 创建的 router 实例完全相同
　　4：之前使用this.$router时候、是因为不想每次使用的时候都导入路由8：query、params的区别？
　　1：query 类似于get传参、刷新参数不会丢失、name、path都可以使用
　　2：params：类似于post、地址栏不可见。属性参数会丢失、只能使用name router.push({ name: ＂user＂, params: { username: ＂＂ } })  router.push({ path: ＂/register＂, query: { plan: ＂＂ } })  //返回的是一个promise、可以让我们等待导航完成之后才知道是成功还是失败  //替换当前位置、区别是不会像 history 添加新记录 router.replace(...) router.push、router.replace 和 router.go   是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版  它们确实模仿了 window.history 的 API。9：怎么实现嵌套路由
　　1：要将组件渲染到这个嵌套的router-view中，我们需要在路由中配置 children 注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。10：怎么监听路由参数的变化？
　　1：watch：监听$this.$router
　　2：路由钩子函数：beforeRouteUpdate(to,from,next)
　　3：当使用同一个组件的时候、如果只是参数的变化、会被复用、生命周期钩子不会调用。我们需要监听参数的变化来做一些处理当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性
　　4：route对象是一个响应式对象、所有属性都可以被监听。但是应该避免监听、应该直接监听期望改变的参数
　　例：比如参数改变获取用户信息
　　11：重定向
　　如果用户访问一个地址的时候、会显示别的地址、重定向别的路由
　　如果从a重定向到b路由
　　const routes = [{ path: ＂/a＂, redirect: ＂/b＂ }]
　　重定向的目标也可以是一个命名的路由12：导航守卫
　　1：全局 2：单个路由独享 3：组件级别的
　　1：全局的：beforeEach、afterEach 区别是：后者只有两个参数，不需要调用next()beforeEach:必须调用next()，导航的状态才会改变。才会执行后面的
　　2：路由独享守卫beforeEnter 配置路由的地方配置的
　　3：组件内的：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeavebeforeRouteEnter：beforeRouteEnter：不能使用this、获取不到组件实例、因为这个时候组件还没有创建 beforeRouteUpdate：路由改变、组件被复用的时候调用、监听url参数变化、可以访问this beforeRouteLeave：导航离开的时候、不能访问this(可以传一个回调给next来访问组件实例) beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) } 离开守卫的应用：例如禁止用户还没有保存的时候离开，可以通过next(false)来取消 只是参数的改变不会引起进入离开的导航守卫，需要watch和beforeRouteUpdate组件内导航13：路由元信息
　　1：可以将任何信息附加到路由上、例如过渡名称、谁可以访问路由等、可以再meta属性来实现meta: { requiresAuth: true } // 只有经过身份验证的用户才能创建帖子
　　2：一个路由匹配成功后、会匹配多个路由记录、然后会暴露给$route对象、 需要遍历数组来检查路由记录中的meta字段、也可以使用$route.meta方法 是一个非递归合并所有meta字段 router.beforeEach((to, from) => {// 而不是去检查每条路由记录         // to.matched.some(record => record.meta.requiresAuth)         if (to.meta.requiresAuth && !auth.isLoggedIn()) {             // 此路由需要授权，请检查是否已登录 如果没有，则重定向到登录页面             return {                 path: ＂/login＂,                 query: { redirect: to.fullPath },  // 保存我们所在的位置，以便以后再来             }         }     })14：路由懒加载
　　1：被访问的时候才加载对应的组件
　　2：vue-router支持动态导入、代替静态导入
　　3：实现方法 动态导入、代替静态导入 箭头函数为异步组件
　　4：怎么判断有没有配置好路由懒加载
　　打包完成看生产的js文件多少
　　路由懒加载打包完成
　　5：component 配置接收一个返回 Promise 组件的函数、只会在第一次进入页面的时候才会获取这个函数、 然后使用缓存数据、这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise 一般来说，对所有的路由都使用动态导入是个好主意。 不要在路由中使用异步组件。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。
　　6：把组件按组分块 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中15：动态路由
　　1：动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()
　　2：应用：实现路由权限
　　3：前端做的路由权限，判断用户可以看到哪些页面，那些按钮
　　4：后端权限是进入到了这个页面，可不可以提交这个内容等
　　5：实现思路：
　　1：创建实例的时候、我们挂在的路由是一项不需要用户权限的公共页面：登录、注册、首页
　　2：登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由 meta:来标识页面能访问的权限有哪些，这里是admin和超级管理员才可以 总结：获取用户的roleId，然后根据这个id去匹配我们写的路由文件。再通过roter.addRouter动态的挂载路由。
　　3：如果是按钮权限可以写一个自定义指令、然后判断我们这个按钮的值，在后端返回的按钮数组里有没有
　　4：接口权限 可以在axios中拦截、返回的状态吗
　　5：main.js router.beforeEach if(判断有没有token、没有则去登录页){
　　1：判断当前用户有没有拉取用户表、没有去vuex中拉取
　　2：有权限的时候 next() 说明可访问的路由已经生成了、可以去访问了 }else{ 没有token的时候也可以设置一下免登录白名单 16：路由有几种模式？
　　1：2种中 hash、history
　　2：hash模式
　　带#号、#后面的地址不会请求服务器、兼容性好、类似于锚点、不美观有体积限制、createWebHashHistory()创建的 原理：onhashChange事件在页面hash值发生变化时候、无需向后端发送请求。window就可以监听事件的变化、并加载相应的代码 hash值变化对应的url会被浏览器记住、这样就可以实现前进后退。
　　3：HTML5模式
　　没有#号、url变更时发送的服务器http请求、借助了history.pushState实现了页面的无刷新跳转 原理：基于history.pushState、replaceState createWebHistory()创建
　　4：为啥history一刷新页面会报404？
　　url的改变，会发送http请求，后端没有找到这个地址对应的页面，需要后端配置、找不到就返回首页。17：滚动位置 const router = createRouter({         history: createWebHashHistory(),         routes: [],         scrollBehavior (to, from, savedPosition) {             // return 期望滚动到哪个的位置             return { top: 0 }         }     })
　　1：切换路由时候、想要滚动到页面最底部、或者保持到原先的位置scrollBehavior
　　2：注意: 这个功能只在支持 history.pushState 的浏览器中可用18：过渡动效                     1：如果是单个路由的过渡 可以使用元信息和动态的name、                            2：也可以使用目标路由和当前路由的关系、动态的使用过渡 router.afterEach  3:强制在复用的视图之间进行过渡 vue会自动复用看起来相似的组件、从而忽略任何过渡、可以添加一个key属性强制过渡                     19：与vue2中路由的改变不同
　　1：new Router 变成 createRouter 不再是一个类，而是一组函数。现在你不用再写 new Router()，而是要调用 createRouter:
　　2：新的 history 配置取代 mode、然后根据不同的模式调用不同的函数＂history＂: createWebHistory() ＂hash＂: createWebHashHistory() ＂abstract＂: createMemoryHistory()
　　3：将 onReady 改为 isReady
　　现有的 router.onReady() 函数已被 router.isReady() 取代，
　　该函数不接受任何参数并返回一个 Promise// 将    router.onReady(onSuccess, onError) // 替换成 router.isReady().then(onSuccess).catch(onError) // 或者使用 await: try { // 成功   await router.isReady() } catch (err) { // 报错 }
　　4：transition和keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用                                          
　　5：删除  中的 append 属性20：每天分享web前端相关知识、喜欢多多点赞关注我哦