《Vue 3基础入门》课件 第七章 vue-router

Vue路由Contents目录

路由的进阶使用0304导航守卫05

路由元信息06过渡动效07

数据捕获08路由懒加载09滚动行为10History模式路由基础01动态路由0201路由基础PART路由基础目前常见的前端路由方案主要有以下4种：hash模式基于锚点的原理实现，简单易用history模式使用HTML5标准中的HistoryAPI通过监听popstate事件来对DOM对象进行操作，每次路由变化不会引起重定向memory模式在内存中维护一个堆栈用于管理访问历史的方式，在早期移动端使用比较多，实现麻烦，问题也较多。ReactNative使用这种路由模式static模式主要用于服务端渲染（SSR），需要后端去管理路由。在HTML中使用VueRouter在使用VueRouter时需要使用一个自定义组件router-link来创建链接。VueRouter可以在不重新加载页面的情况下更改URL、处理URL的生成及编码，router-view组件负责控制显示与URL对应的组件，可以将其放置在任何位置，以适应所需的布局<scriptsrc="/vue-router@4"></script><divid="app"><h1>HelloApp!</h1><p><!--使用router-link组件来导航.--><!--通过传入'to'属性指定链接.--><!--<router-link>默认会被渲染成一个'<a>'标签--><router-linkto="/foo">GotoFoo</router-link><router-linkto="/bar">GotoBar</router-link></p><!--路由出口--><!--路由匹配到的组件将渲染在这里--><router-view></router-view></div>在JavaScript代码中使用VueRouter在JavaScript中可以方便地使用VueRouter//0.如果使用模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)//1.定义(路由)组件。//可以从其他文件import进来constFoo={template:'<div>foo</div>'}constBar={template:'<div>bar</div>'}//2.定义路由constroutes=[{path:'/foo',component:Foo},{path:'/bar',component:Bar}]//3.创建router实例，然后传routes配置constrouter=VueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes//相当于routes:routes})//4.创建和挂载根实例constapp=Vue.createApp({//options}).use(router).$mount('#app')通过注入路由器可以在任何组件内使用路由器，通过this.$router访问路由器或者访问当前路由的信息//Home.vueexportdefault{computed:{username(){returnthis.$route.params.username}},methods:{goBack(){window.history.length>1?this.$router.go(-1):this.$router.push('/')}}}02动态路由PART动态路由若需将所有匹配某种模式的路由都映射到同一个组件。对于所有id不相同的用户都用此组件来渲染，可以在VueRouter的路由路径中使用动态路径参数(dynamicsegment)来实现这一目标constUser={template:'<div>User</div>'}constrouter=VueRouter.createRouter({routes:[//动态路径参数以冒号开头{path:'/user/:id',component:User}]})通过上述函数，用户在URL中输入路径/user/foo和/user/bar都将被映射到同一个路由，在VueRouter中，使用冒号“:”标记路径参数，在匹配到路由时，参数值会被设置到this.$route.params中可以在每个组件内使用，可以利用这个特性更新User组件的模板，constUser={template:'<div>User{{$route.params.id}}</div>'}在一个路由中设置多个路径参数，对应的值都会被设置到$route.params中。除了$route.params外，$route对象还提供了其他有用的信息，例如$route.query（如果URL中有查询参数）、$route.hash等。参数响应当使用带有参数的路由时相同的组件实例将被重复使用，两个路由渲染同一个组件，相较于销毁再创建，复用则更加高效，但组件的钩子函数不会被调用。若要对同一个组件中参数的变化作出响应，开发者可以观测$route对象上的任意属性如$route.params，也可以使用beforeRouteUpdate导航守卫来取消导航constUser={template:'...',created(){this.$watch(()=>this.$route.params,(toParams,previousParams)=>{//对路由变化作出响应})},}constUser={template:'...',asyncbeforeRouteUpdate(to,from){//对路由变化作出响应this.userData=awaitfetchUser(to.params.id)},}捕获所有路由常规参数只匹配URL片段之间的字符，使用“/”分隔，若匹配任意路径可使用自定义的路径参数正则表达式constroutes=[//将匹配所有内容并将其放在$route.params.pathMatch下{path:'/:pathMatch(.*)*',name:'NotFound',component:NotFound},//将匹配以/user-开头的所有内容，并将其放在$route.params.afterUser下{path:'/user-:afterUser(.*)',component:UserGeneric},]在路径参数后的括号中加入了一个自定义的正则表达式，并将pathMatch参数标记为可选可重复。这样做是为了让开发者可以通过将路径拆分成一个数组直接导航到路由this.$router.push({name:'NotFound',//保留当前路径并删除第一个字符params:{pathMatch:this.$route.path.substring(1).split('/')},//保留现有的查询和hash值query:this.$route.query,hash:this.$route.hash,})03路由进阶使用PART嵌套路由实际应用中的界面通常由多个嵌套的组件组成，URL中的动态路径也按照一定的结构对应于嵌套的组件层次结构，路由结构如图所示嵌套路由通过vue-router的嵌套路由配置，可以简单地表示出应用程序中的多层嵌套组件关系<divid="app"><router-view></router-view></div>constUser={template:'<div>User{{$route.params.id}}</div>',}//这些都会传递给'createRouter'constroutes=[{path:'/user/:id',component:User}]这里的<router-view>是一个顶层的router-view，用来渲染顶层路由匹配的组件。一个被渲染的组件也可以嵌套<router-view>，例如在User组件的模板内添加一个<router-view>，将组件渲染到嵌套的router-view中，并在路由中配置子路由(children)的constUser={template:'<divclass="user"><h2>User{{$route.params.id}}</h2><router-view></router-view></div>',}constroutes=[{path:'/user/:id',component:User,children:[{//当/user/:id/profile匹配成功//UserProfile将被渲染到User的<router-view>内部path:'profile',component:UserProfile,},{//当/user/:id/posts匹配成功//UserPosts将被渲染到User的<router-view>内部path:'posts',component:UserPosts,},],},]编程式导航除了使用<router-link>创建a标签来定义导航链接，还可以通过调用router实例的各种函数编写代码来实现导航。1.router.push()函数2.router.replace()3.router.go()命名路由有时候通过一个名称来标识一个路由更加方便，特别是在链接一个路由或执行一些跳转时。在创建Router实例并配置routes时，可以为某个路由设置名称，要链接到一个命名路由，可以给router-link的to属性传一个对象constrouter=newVueRouter({routes:[{path:'/user/:userId',name:'user',component:User}]})<router-link:to="{name:'user',params:{userId:123}}">User</router-link>有时候需要同时展示多个同级视图，而不是嵌套视图，例如创建一个布局，有sidebar（侧导航）和main（主内容）两个视图，这时可以使用命名视图。开发者可以在界面中拥有多个单独命名的视图，而不是只有一个默认的router-view，如果没有为router-view设置名称，则默认名称为default<router-viewclass="viewone"></router-view><router-viewclass="viewtwo"name="a"></router-view><router-viewclass="viewthree"name="b"></router-view>components配置项constrouter=newVueRouter({routes:[{path:'/',components:{default:Foo,a:Bar,b:Baz}}]})重定向与别名1.重定向重定向也可以在routes配置中完成，重定向的目标也可以是一个命名路由，甚至是一个函数，动态返回重定向目标，constroutes=[{path:'/home',redirect:'/'}]constroutes=[{path:'/home',redirect:{name:'homepage'}}]constroutes=[{///search/screens->/search?q=screenspath:'/search/:searchText',redirect:to=>{//函数接收目标路由作为参数//return重定向的字符串路径/路径对象return{path:'/search',query:{q:to.params.searchText}}},},{path:'/search',//...},]2.相对重定向constroutes=[{//将总是把/users/123/posts重定向到/users/123/profilepath:'/users/:id/posts',redirect:to=>{//该函数接收目标路由作为参数return'profile'},},]3.别名constroutes=[{path:'/users',component:UsersLayout,children:[//为这3个URL呈现UserList//-/users//-/users/list//-/people{path:'',component:UserList,alias:['/people','list']},],},]路由组件参数传递在组件中使用$route会与路由紧密耦合，这会限制组件的灵活性，可以通过props配置来解耦，这允许在任何地方使用该组件，使该组件更容易重用和测试constUser={template:'<div>User{{$route.params.id}}</div>'}constroutes=[{path:'/user/:id',component:User}]constUser={//请确保添加一个与路由参数完全相同的属性名props:['id'],template:'<div>User{{id}}</div>'}constroutes=[{path:'/user/:id',component:User,props:true}]props配置有以下几种方式1.布尔模式当props设置为true时，route.params将被设置为组件的props2.命名视图对于有命名视图的路由，必须为每个命名视图定义props配置constroutes=[{path:'/user/:id',components:{default:User,sidebar:Sidebar},props:{default:true,sidebar:false}}]3.对象模式constroutes=[{path:'/promotion/from-newsletter',component:Promotion,props:{newsletterPopup:false}}]4.函数模式constroutes=[{path:'/search',component:SearchUser,props:route=>({query:route.query.q})}]04History模式PARTHTML5HistoryAPIDOM中的window对象通过history对象提供了对浏览器历史的访问，它暴露了很多有用的函数和属性，允许开发者在用户浏览历史中向前和向后跳转，从HTML5开始，还提供了对history栈中内容的操作1.在history中跳转2.pushState()函数和replaceState()函数后端配置如果需要将项目部署在一个子目录下，应该使用VueCLI中的publicPath选项以及相关的路由器基础属性，然后调整Web服务器根目录将其替换为子目录（例如用RewriteBase/name-of-your-subfolder/替换RewriteBase/）#Apache配置代码<IfModulemod_rewrite.c>RewriteEngineOnRewriteBase/RewriteRule^index\.html$-[L]RewriteCond%{REQUEST_FILENAME}!-fRewriteCond%{REQUEST_FILENAME}!-dRewriteRule./index.html[L]</IfModule>

#Nginx配置代码location/{try_files$uri$uri//index.html;}Node.js中的路由功能代码如下：consthttp=require('http')constfs=require('fs')consthttpPort=80http.createServer((req,res)=>{fs.readFile('index.html','utf-8',(err,content)=>{if(err){console.log('Wecannotopen"index.html"file.')}

res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'})

res.end(content)})}).listen(httpPort,()=>{console.log('Serverlisteningon:http://localhost:%s',httpPort)})05导航守卫PART全局守卫开发者可以使用router.beforeEach注册一个全局前置守卫函数constrouter=newVueRouter({...})

router.beforeEach((to,from,next)=>{//...})router.afterEach((to,from)=>{//...})当一个导航被触发时，全局前置守卫函数按照创建顺序调用。守卫函数是异步解析执行的，此时导航在所有守卫函数执行完之前一直处于等待中，每个守卫函数接收以下3个参数。（1）to:Route对象，即将要进入的目标路由对象。（2）from:Route对象，当前导航正要离开的路由对象。（3）next:Function函数，必须调用该函数来通知守卫函数执行完毕，执行效果依赖next函数的调用参数。也可以注册全局后置守卫函数，该函数不会接受next函数也不会改变导航本身路由独享守卫和组件内守卫在路由配置上直接定义beforeEnter守卫constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{//...}}]})可以在路由组件内直接定义以下3个路由导航守卫。（1）beforeRouteEnter。（2）beforeRouteUpdate。（3）beforeRouteLeave示例constFoo={template:'...',beforeRouteEnter(to,from,next){//渲染该组件前调用},beforeRouteUpdate(to,from,next){//在当前路由改变且组件被复用时调用},beforeRouteLeave(to,from,next){//导航离开组件路由时调用}}导航解析流程（1）导航被触发。（2）在失活的组件里调用beforeRouteLeave守卫。（3）调用全局的beforeEach守卫。（4）在重用的组件里调用beforeRouteUpdate守卫(需vue-router2.2版本以上)。（5）在路由配置里调用beforeEnter守卫。（6）解析异步路由组件。（7）在被激活的组件里调用beforeRouteEnter守卫。（8）调用全局的beforeResolve守卫(需vue-router2.5版本以上)。（9）导航被确认。（10）调用全局的afterEach()钩子函数。（11）触发DOM树结构更新。（12）调用beforeRouteEnter守卫中传递给next的回调函数，已创建好的组件实例会作为回调函数的参数传递。06路由元信息PART路由元信息定义路由的时候可以配置meta字段constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,children:[{path:'bar',component:Bar,//元信息meta:{requiresAuth:true}}]}]})下面的例子展示了如何在全局导航守卫中检查元信息：outer.beforeEach((to,from,next)=>{if(to.matched.some(record=>record.meta.requiresAuth)){//判断是否已经登录//如果没有登录，跳转到登录页面if(!auth.loggedIn()){next({path:'/login',query:{redirect:to.fullPath}})}else{next()}}else{next()//确保一定要调用next()函数}})07过渡动效PART单路由过渡在各个路由组件内部使用<transition>标签，并设置不同的nameconstFoo={template:'<transitionname="slide"><divclass="foo">...</div></transition>'}constBar={template:'<transitionname="fade"><divclass="bar">...</div></transition>'}或者采用下面这种方式：constroutes=[{path:'/custom-transition',component:PanelLeft,meta:{transition:'slide-left'},},{path:'/other-transition',component:PanelRight,meta:{transition:'slide-right'},}]<router-viewv-slot="{Component,route}"><!--使用任何自定义过渡和回退到'fade'--><transition:name="route.meta.transition||'fade'"><component:is="Component"/></transition></router-view><router-view>是基本的动态组件，可以用<transition>组件给它添加一些过渡效果，代码如下：<transition><router-view></router-view></transition>路由动态过渡基于当前路由与目标路由的变化关系，动态设置过渡效果<!--使用动态的transitionname--><transition:name="transitionName"><router-view></router-view></transition>//在父组件内使用$route规则决定使用哪种过渡watch:{'$route'(to,from){consttoDepth=to.path.split('/').lengthconstfromDepth=from.path.split('/').lengththis.transitionName=toDepth<fromDepth?'slide-right':'slide-left'}}08数据获取PART数据获取1.导航完成后获取数据使用该方式，系统会立即进行导航和组件渲染，并在组件的created()钩子函数中获取数据，这使得开发人员有机会在数据获取期间展示加载状态，并可以在不同的视图中显示不同的加载状态。假设有一个“文章（post）"组件，需要基于$route.params.id获取文章数据<template><divclass="post"><divv-if="loading"class="loading">Loading...</div>

<divv-if="error"class="error">{{error}}</div>

<divv-if="post"class="content"><h2>{{post.title}}</h2><p>{{post.body}}</p></div></div></template>exportdefault{data(){return{loading:false,post:null,error:null}},created(){this.fetchData()//组件创建完后获取数据},watch:{'$route':'fetchData’//如果路由有变化，会再次执行该函数},methods:{fetchData(){this.error=this.post=nullthis.loading=true//请自行替换getPost函数中获取数据的方式getPost(this.$route.params.id,(err,post)=>{this.loading=falseif(err){this.error=err.toString()}else{this.post=post}})}}}数据获取2.在导航完成前获取数据采用这种方式，可以在导航进入新路由之前获取数据，开发人员可以在接下来的组件的beforeRouteEnter守卫中获取数据，当数据获取成功后只需调用next()函数即可exportdefault{data(){return{post:null,error:null}},beforeRouteEnter(to,from,next){getPost(to.params.id,(err,post)=>{next(vm=>vm.setData(err,post))})},//路由改变前，组件就已经渲染完毕beforeRouteUpdate(to,from,next){this.post=nullgetPost(to.params.id,(err,post)=>{this.setData(err,post)next()})},methods:{setData(err,post){if(err){t