背景承接前三篇：vue3.0尝鲜-从ToDoList开始（一）vue3.0尝鲜-理解变化（二）早期vue3.0的采用者-typscript开发组件（三）在正式开发前需要引入路由变化，这样即使你对vue3.0的开发有了初步的了解，也完成了项目的基本搭建。安装vue-router//最新版本npmi--savevue-router@4.0.0-beta.9"vue-router":"^4.0.0-beta.9"//配置import{createRouter,createWebHashHistory}from'vue-router'constrouter=createRouter({//createWebHistory()hostorymodehistory:createWebHashHistory(),//hashmoderoutes:[{path:'/',redirect:'/home',},//动态路径参数以冒号开头{path:'/home',component:()=>import('../views/home.vue')},],})exportdefaultrouter//usemain.jsapp。use(router)scopedslot(scopedslot)删除标签属性(vue2.0router文档标签介绍)本来想把渲染成某种标签，但是用起来会不直观清晰//before//tag="button"router-link将呈现为按钮标签homeHome//然后用scopedslot代替homeHome删除事件属性（vue2.0路由器文档偶t介绍）默认为'click'，声明的可用于触发导航的事件可以是字符串或包含字符串的数组。也被删除并替换为作用域插槽。停止自动分配点击事件给内部锚点添加一个scoped-slotAPI，并添加自定义props，完全自定义router-link的渲染缩写（有坑）//从第二篇开始，v-slot有abbreviations方法，但是值得这里注意下面的写法在浏览器渲染中不起作用1.{{href}}2.{{href}}3.{{href}}渲染后的结果只是第三次正常显示---###vue-router的API和vue3.0是一样的，所有的api都是导入的，不放在这(printrequire('vue-router'))meta属性（将数据附加到路由的属性）{path:'/my',meta:{requiresAuth:true}}//beforerouter.beforeEach((to,from,next)=>{if(to.meta.requiresAuth&&!auth.loggedIn())next('/login')elsenext()})//建议3.0router.beforeEach((to,from,next)=>{if(to.匹配。some(record=>record.meta.requiresAuth))//...dosth})router-link-active/router-link-exact-active类名别名和子路由也将激活假设当前路由/parent/1/child/2urlactiveexactactive/parent/1/child/2??/parent/1/child/3XX/parent/1/?X可以在路由时提供，不一致的active参数不会被激活添加和删??除路由记录的操作API//my.vueimport{useRouter,useRoute}from'vue-router'//见上面介绍的vue-router的当前APIsetup(props,ctx){console.log(useRouter(window.location.pathname));//类似于原来的this.$routerconsole.log(useRoute(window.location.pathname));//类似于原来的this.$route}//路由记录的值constrouteRecord:RouteRecord={path:'/new-route',name:'NewRoute',component:NewRoute}router.addRoute(route:RouteRecord)//添加路由记录router.removeRoute(name:string|symbol)//deleterouter.hasRoute(name:string|symbol)://判断是否有router.getRoutes():RouteRecord[]//获取路由跳转记录列表明确定义路由跳转失败，然后如何捕捉错误路由跳转会以Promisewillrouter的形式出现。push与router.afterEach一致，router.onErrorrouter.push('/dashboard').then((failure)=>{if(failure){failureinstanceofError//truefailure.type//NavigationFailure.canceled【aborted,canceled,duplicated]}}).catch(()=>{...})同时使用keep-alive和transition//之前//在之后滚动行为不常用，官网vue2.0的介绍//改动不大，只是为了更接近原来，属性名统一了{selector:..,x:0,y:200,behavior}//变成{el:...,left:0,top:200,offset}激活路由时添加逻辑判断，在路由中显示其他内容（比如一些加载状态）查看constApp={computed:{routeWithModal(){if(backgroundView){returnthis.$router.resolve(backgroundView)}else{returnthis.$route}}}}route守卫不需要使用next，也可以直接返回某个值或者Promise//beforerouter.beforeEach((to,from,next)=>{if(!isAuth)next(false)elsenext()})//after可以router.beforeEach(()=>isAuth)最后安装好，了解路由的相关变化后，就可以直接开始整个流程了。vue3.0的变化还是可以接受的，正在往更好的方向发展。推荐使用vite也不错，很多东西都是内置的，开箱即用。至于typesciprt，只是vue3.0更好的支持了ts语法，但是用不用，怎么用还是要看项目和开发者自己。目前介绍了vue3.0的使用，现在可以真正开始写项目了。还有就是VueCompositionAPI没有介绍，简单常用的API上面已经用过了，后面会更新。github代码地址介绍到这里。如有遗漏，欢迎大家补充。如果你喜欢它，请喜欢它。
