vue3中怎么使用路由？与vue2路由的区别？vuerout

　　1：什么是路由？
　　1：组件和url路径的映射关系。
　　2：前端最初是一个地址对应的一个页面，地址改变整个页面刷新、页面改变就是组件的切换、后面有了ajax，实现了局部刷新。
　　3：单页面：不刷新页面的情况下局部更新。缺点：首次加载太多，初次进入慢。2：什么是前端路由？什么是前端渲染？
　　后端返回的是json数据，前端根据数据去构建html页面、后端渲染直接返回的是html页面3：路由实现思路？
　　拦截不让跳转、监听url变化展示对应的组件、前端维护路由规则4：安装方法？npminstallvuerouter4yarnaddvuerouter45：怎么使用？routerlinktoGotoHomerouterlinkrouterviewrouterview
　　1：routerlink呈现的a链接、没有使用a标签是为了可以在不重新加载页面的情况下更改url
　　2：routerview路由匹配的渲染结果、匹配对应的组件
　　3：跳转和a链接href的区别？是否刷新页面跳转6：具体使用方法？
　　1：新建路由文件router。js创建路由实例然后在routes配置
　　2：main中引入新建这个路由文件创建实例完成并在main。js挂载根实例
　　3：详细配置main。jsrouter。js7：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、地址栏不可见。属性参数会丢失、只能使用namerouter。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：要将组件渲染到这个嵌套的routerview中，我们需要在路由中配置children注意，以开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的URL。10：怎么监听路由参数的变化？
　　1：watch：监听this。router
　　2：路由钩子函数：beforeRouteUpdate（to，from，next）
　　3：当使用同一个组件的时候、如果只是参数的变化、会被复用、生命周期钩子不会调用。我们需要监听参数的变化来做一些处理当用户从usersjohnny导航到usersjolyne时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。要对同一个组件中参数的变化做出响应的话，你可以简单地watchroute对象上的任意属性
　　4：route对象是一个响应式对象、所有属性都可以被监听。但是应该避免监听、应该直接监听期望改变的参数
　　例：比如参数改变获取用户信息
　　11：重定向
　　如果用户访问一个地址的时候、会显示别的地址、重定向别的路由
　　如果从a重定向到b路由
　　constroutes〔｛path：a，redirect：b｝〕
　　重定向的目标也可以是一个命名的路由12：导航守卫
　　1：全局2：单个路由独享3：组件级别的
　　1：全局的：beforeEach、afterEach区别是：后者只有两个参数，不需要调用next（）beforeEach：必须调用next（），导航的状态才会改变。才会执行后面的
　　2：路由独享守卫beforeEnter配置路由的地方配置的
　　3：组件内的：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeavebeforeRouteEnter：beforeRouteEnter：不能使用this、获取不到组件实例、因为这个时候组件还没有创建beforeRouteUpdate：路由改变、组件被复用的时候调用、监听url参数变化、可以访问thisbeforeRouteLeave：导航离开的时候、不能访问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（recordrecord。meta。requiresAuth）if（to。meta。requiresAuth！auth。isLoggedIn（））｛此路由需要授权，请检查是否已登录如果没有，则重定向到登录页面return｛path：login，query：｛redirect：to。fullPath｝，保存我们所在的位置，以便以后再来｝｝｝）14：路由懒加载
　　1：被访问的时候才加载对应的组件
　　2：vuerouter支持动态导入、代替静态导入
　　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。jsrouter。beforeEachif（判断有没有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、replaceStatecreateWebHistory（）创建
　　4：为啥history一刷新页面会报404？
　　url的改变，会发送http请求，后端没有找到这个地址对应的页面，需要后端配置、找不到就返回首页。17：滚动位置constroutercreateRouter（｛history：createWebHashHistory（），routes：〔〕，scrollBehavior（to，from，savedPosition）｛return期望滚动到哪个的位置return｛top：0｝｝｝）
　　1：切换路由时候、想要滚动到页面最底部、或者保持到原先的位置scrollBehavior
　　2：注意：这个功能只在支持history。pushState的浏览器中可用18：过渡动效routerviewvslot｛Component｝transitionnamefadecomponent：isComponenttransitionrouterview1：如果是单个路由的过渡可以使用元信息和动态的name、routerviewvslot｛Component，route｝！使用任何自定义过渡和回退到fadetransition：nameroute。meta。transitionfadecomponent：isComponenttransitionrouterview2：也可以使用目标路由和当前路由的关系、动态的使用过渡router。afterEach3：强制在复用的视图之间进行过渡vue会自动复用看起来相似的组件、从而忽略任何过渡、可以添加一个key属性强制过渡routerviewvslot｛Component，route｝transitionnamefadecomponent：isComponent：keyroute。pathtransitionrouterview19：与vue2中路由的改变不同
　　1：newRouter变成createRouter不再是一个类，而是一组函数。现在你不用再写newRouter（），而是要调用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｛成功awaitrouter。isReady（）｝catch（err）｛报错｝
　　4：transition和keepalive现在必须通过vslotAPI在RouterView内部使用routerviewvslot｛Component｝transitionkeepalivecomponent：isComponentkeepalivetransitionrouterview
　　5：删除中的append属性20：每天分享web前端相关知识、喜欢多多点赞关注我哦