前端路由工作原理及使用

单页应用和多页应用单页应用：一个页面实现所有功能，一个.html文件前端路由组件开发网易云音乐小米手机多页应用:和单页应用相对应，通过不同的页面实现不同的功能。单页-多页对比路由vue路由官网路由理解的路由概念：是一一对应的集合。前端路由（单页应用）：一个url地址，对应哪个组件后端路由：一个接口地址，接口地址的哪段对应前端路由后端路由和监控，切换dom相应页面组件的结构分析根据地址栏的变化（无需重新向服务器发送请求），对不同页面的内容进行局部更新，完成前端业务场景切换思路中的Hash值URL地址栏变了前端js监听Hash地址的变化window.onhashchange=()=>{}前端js渲染当前Hash地址对应的组件，实现浏览器中的前端路由简单地。1、创建src/views/并在App.vue中导入导入注册组件MyHome.vueMyMovie.vueMyAbout.vue复制代码通过动态组件控制要显示的组件复制声明三个导航链接的代码，修改点击时地址栏的hash值复制created中的代码，监听地址栏hash的变化，一旦变化，动态切换显示组件created(){window.onhashchange=()=>{switch(location.hash){case'#/home':this.comName='my-home'breakcase'#/movie':this.comName='my-movie'breakcase'#/about':this.comName='my-about'break}}}，复制代码总结更改浏览器url的hash值，JS监听hash值的变化，将对应组件显示到同一个挂载点路由——官方路由基本使用vue-router文档说明??：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装配置步骤安装包配置路由使用路由操作安装npmivue-router@3.5。3创建路由文件router/index.js//导入routingplug-inimportVueRouterfrom'vue-router'importVuefrom'vue'//useplug-in-importVue.use(VueRouter)//importcomponentimportPage1from'./Page1.vue'importPage2from'./Page2.vue'从'./Page3.vue'导入Page3//创建路由规则constrouter=newVueRouter({routes:[{path:"/page1",//当浏览器访问http://localhost:8080/#/page1,component:Page1//加载组件Page1},{path:"/page2",component:Page2},{path:"/page3",component:Page3}]})exportdefaultrouter复制代码Useroutinginmain.jsimportrouterfrom'./router/index.js'newVue({router:router,//使用路由render:h=>h(App),}).$mount('#app')复制代码使用路由`复制代码`测试地址栏输入地址访问图标摘要下载路由模块，编写相应规则注入vue实例，使用router-view挂载点显示切换路由链接导航-router-link掌握router-link的使用Router-link组件介绍作用：用于提供路由链接，实现页面跳转格式：主页要点：它是vue-组件router-linkprovrouterided最终会被渲染为一个链接router-link有自己的链接导航高亮功能示例复制激活类名代码router-link-exact-activerouter-link-activesummary链接导航，使用router-link配合，点击切换路由router-link组件会被vue解析成一个标签，但是不能通过a标签直接跳转。如果当前路由被激活，会添加一个特殊的类名：页面跳转参数传递master跳转参数传递复习html页面之间如何传递参数的方式？=》url?key=val&key=valvue路由传递参数有两种方式：1.query传递参数。适用场景：页面搜索2.params参数传递。适用场景：在详情页创建components/MyGoods.vue——准备接收路由

复制代码路由定义{path:"/goods",component:MyGoods},{path:"/goods/:goodsId",component:MyGoods},复制代码导航跳转,传值给MyGoods.vue组件

jacket

details

复制代码diagram-querystringdiagram-params参数传递总结?key=value="使用route.query.key获取value/value-需要在路由中rule/path/:key=inadvance》Useroute.query.keytogetvalue/value-需要在路由规则中提前/path/:key=》Useroute.query.keytogetvalue/value-need在路由规则中提前使用route/path/:key=》params.keyValueRouting-Redirection掌握路由重定向的用法理解d重定向，用户访问地址A，系统切换到地址B。应用场景：改变默认访问页面行为的例子在router/index.js-修改配置constroutes=[{path:"/",redirect:"/home"//重定向}]复制代码routing404统一处理异常地址：正常配置的地址以外的地址。代码可以修改路由规则：使用通配符*设置404页面importNotFoundfrom"@/components/NotFound"；constroutes=[{path:"/",redirect:"/home"//redirect},//...普通路由{//当以上路由都不匹配时，匹配这个通配符，显示NotFound页面路径："*",component:NotFound}]复制代码程序化导航掌握程序化导航的使用。ProgrammaticnavigationProgrammatic:写代码导航：页面跳转programmaticnavigation====>写代码让页面跳转API//不传参跳转页面this.$router.push('/路由路径')this.$router.push({path:'路由路径'})this.$router.push({name:'路由名称'})//跳转查询参数-方法1this.$router.push("/路由路径?参数1=value1¶meter2=value2")//跳转查询参数-方法2this.$router.push({path:"路由路径",query:{"参数1":value1,"参数2":value2}})//跳转传参-方式1this.$router.push("/routingpath/value1/value2")//跳转传参参考-方法2this.$router.push({name:"routename",params:{"parameter1":value1,"parameter2":value2}})//返回$router.back()copycode路由嵌套原理总结：router-view包含在router-view中再次。背景：一个组件包含的业务还是很复杂，需要重新拆分。格式：routes:[{path:'/page1',component:Page1,//这个组件内部有router-viewchildren:[{path:'',//path为空，表示当#/page1时，显示Page1component+component1component:component1//},{path:'/xx1',//path以/开头，表示#/xx1时显示Page1component+component2component:component2},{path:'xx2',//path以/开头，表示/page1/xx2时，会显示Page1组件+组件3component:component3}]}]复制代码示例总结：在已有的路由容器中，实现另外设置Routing，然后设置一个路由容器，叫做：嵌套路由。嵌套路由除了router-view需要嵌套，路由规则也需要通过children进行嵌套。案例-模拟网易云音乐效果二级路由实例-网易云音乐-发现音乐下一个思路：创建路由需要的所有页面组件=>两条一级路由，三条二级路由src/views/MyMusic.vue--我的音乐页面-1src/views/FindMusic.vue--查找音乐页面-2src/views/Child/Recommend.vue--查找音乐页面/推荐页面-2-1src/views/Child/Ranking.vue--查找音乐page/leaderboardpage-2-2src/views/Child/SongList.vue--discovermusicpage/songlistpage-2-3router/index.js在router/index.js中配置一级路由路径定义二级-levelroutepathfrom/直接写名字或者带上一级路由的路径（配置在一级路由对应的children数组中）默认显示一个二级路由。路径与一级路由一致或为空。importVuefrom'vue'importVueRouterfrom'vue-router'//Level1routeimportFindMusicfrom'@/views/FindMusic'importMyMusicfrom'@/views/MyMusic'//Level2routeimportRecommendfrom'@/views/Child/Recommend'importRankingfrom'@/views/Child/Ranking'importSongListfrom'@/views/Child/SongList'Vue.use(VueRouter)constroutes=[{路径：“/”，重定向：“/find"},{path:"/find",//一级路由组件：FindMusic,//findchildren下的二级路由：[{path:"/find",//同父路由路径，默认加载本路由component:Recommend},{path:"/find/ranking",component:Ranking},{path:"/find/歌曲列表",组件:SongList}]},{路径:"/my",组件:MyMusic}];constrouter=newVueRouter({routes})exportdefaultrouter复制代码App.vue-一级导航和路由显示复制代码FindMusic.vue-设置二级导航和二级路由显示位置复制代码说明：App.vue，外层router-view负责发现music和我的音乐页面切换FindMusic.vue的内层router-view负责发现music切换全局pre-guard下的子路由页面目标：路由跳转前，会触发一个函数语法：router.beforeEach((to,from,next)=>{})案例：在跳转到路由之前，判断用户已经登录去<我的音乐>页面。如果用户未登录，则弹窗提示返回找到的音乐页面。实现：在router/index.js中对路由对象使用固定方法beforeEach//路由前卫router.beforeEach((to,from,next)=>{//to表示跳转到哪条路径，to的值是一个对象，可以打印出来看看//from表示跳转到哪条路径console.log(to);控制台日志（来自）；//fullPath取?后的参数，path为完整路径console.log("路由即将跳转");//模拟判断是否登录，登录后可以去我的音乐letloginFlag=false;//假设false表示未登录if(to.path=="/my"&&loginFlag==false){//如果你去个人中心页面，判断你没有登录，你是提示登录（并强行跳回查找）alert("请先登录！");下一个（“/找到”）；}else{//如果不进入/my页面，则直接跳转到next();}});复制代码全局后卫目标：路由跳转后，触发函数语法：router.afterEach((to,from)=>{})使用：router/index.js-addrouter.afterEach((to,form)=>{console.log(to);console.log(form);console.log("Theroutehasbeenredirected");})复制代码路由模式设置目标：修改地址栏router中路由的mode模式文件/index.jsconstrouter=newVueRouter({routes,mode:"history"//打包上线后需要后台支持})复制代码History和hash模式对比：功能相同（跳转到页面）pathhistory模式下path没有#，hash有#hash模式兼容性例子hash路由例子：http://localhost:8081/#/homehistory路由例子：http://localhost:8081/home源码附件已经打包上传到Hundreds都匀，可以自己下载~链接：https://pan.baidu.com/s/14G-b...提取码：yu27百度云链接不稳定，随时可能失效，如有请速存如果百度云链接失效请留言告诉我，我看到后会及时更新~开源地址代码云地址：http://github.crmeb.net/u/defuGithub地址：http:///github.crmeb.net/u/defu开源不易，Star表示敬意，有兴趣的朋友欢迎Star，提交PR，共同维护开源项目，造福更多人！