《Vue.js前端开发实战（慕课版第2版）》课件 第10--12章 过渡、使用Vue Router实现路由管理、使用axios实现Ajax请求.ppt

编程式导航实现新闻类别选项卡。实例嵌套路由divid=approuter-view/router-view/divscripttype=text/javascriptconstMovie={template:div电影/div}constroutes=[{path:/movie,name:movie,component:Movie}]constrouter=VueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes});/script嵌套路由constMovie={template:`divspan电影/spanrouter-view/router-view/div`}constroutes=[{path:/movie,name:movie,component:Movie,children:[{path:/love,component:loveMovie},{path:/action,component:actionMovie}]}]嵌套路由constroutes=[{path:/movie,name:movie,component:Movie,children:[{path:,component:loveMovie},{path:/love,component:loveMovie},{path:/action,component:actionMovie}]}]嵌套路由乐器一般分为民族乐器和西洋乐器，民族乐器和西洋乐器下面又可以分为不同的类别。使用嵌套路由实现乐器类别切换的效果。实例命名视图router-viewclass=top/router-viewrouter-viewclass=leftname=left/router-viewrouter-viewclass=mainname=main/router-view页面布局顶部主显示区左侧导航栏默认名称defaultconstroutes=[{path:/,components:{default:Top,left:Left,main:Main}}]constrouter=VueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes});router-viewrouter-viewrouter-view高级用法beforeEach钩子函数scrollBehavior方法beforeEach钩子函数beforeEach((to,from,next)={//...})语法格式即将要进入的目标路由对象当前导航即将要离开的路由对象调用该方法后进入下一个钩子过渡单元素过渡多元素过渡多组件过渡列表过渡AI辅助编程单元素过渡CSS过渡过渡的类名介绍自定义过渡的类名CSS动画JavaScript钩子函数CSS过渡transitionname=nameoftransitiondiv/div/transition格式transition用于自动生成CSS过渡类名动态组件四种情形条件渲染