【面试必备-Vue全家桶】本文带你玩转Vue前端路由
作者|与vue.js核心深度融合的路由管理器，让构建单页应用变得轻而易举。它的功能包括：嵌套路由，或查看表；模块化、基于组件的路由配置；基于Vue.js转场系统的路由参数、查询、通配符、视图转场效果、细粒度导航控制；与自动激活的CSS类链接，HTML5历史模式或哈希模式，在IE9中自动降级；自定义滚动条行为。面试官问，你能说出路由的概念吗？你能解释一下使用vue-router的基本步骤吗？或者让你告诉我如何使用vue-router的嵌套路由用法？再问一下vue-router是如何实现动态路由匹配使用的？请告诉我vue-router命名路由的用法？请告诉我vue-router程序化导航的用法？在实际业务中，要实现基于路由的方式。快速入门如何快速入门并掌握呢？了解路由的属性配置说明，如何跳转页面，如何子路由-路由嵌套，路由传参，命名路由，命名视图，重定向，别名，过渡动画，模式和404，路由钩子，路由懒加载。快速入门的第一步是安装，vue-router是一个插件包，需要用npm安装。npminstallvue-router--savevue-cli构建项目。路由器/index.js。//importvueimportVuefrom'vue'//importvue-router路由依赖importRouterfrom'vue-router'//导入页面组件，命名为HelloWorldimportHelloWorldfrom'@/components/HelloWorld'//Vue全局使用RouterVue。use(Router)//定义路由配置exportdefaultnewRouter({routes:[importfromAppmain.js/importv////from'./App'//importroutingconfigurationimportrouterfrom'./router'//closeproduction模式下给出的提示Vue.config.productionTip=false//定义实例newVue({el:'#app',router,//注入框架组件:{App},template:''})页面跳转：[显示字段]hellothis.$router.push('/xxx')返回首页exportdefault{name:'app',方法：{goHome(){this.$router.push('/home');}}}//退一步this.$router.go(-1)//退一步this.$router.go(1)目录然后这篇文章根据面试官会问的来回答，请看下面目录：在开发中，Routing分为后端路由和前端路由。后端路由根据不同的用户url请求返回不同的内容。本质是url请求地址和服务器资源的对应关系。在后端路由过程中，浏览器请求url地址到后端服务器上，请求的url地址被后端路由拦截。服务器有服务器资源内容，也就是url地址请求的资源内容。向服务器请求的资源内容被后端路由拦截，传递给浏览器。SPA，后端渲染是性能问题导致的。用户和服务器经常提交很多，后端路由会导致网页频繁刷新，导致性能问题。有ajax前端渲染。SPA是一个单页应用程序。整个网站只有一个页面，通过ajax局部更新实现内容变化。同时支持浏览器地址的前向后向操作。spa的实现原理之一就是基于url地址上的hash。注意hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的url请求。在实现spa的过程中，最核心的技术就是前端路由。前端路由前端路由根据不同的用户事件显示不同的页面内容。本质是用户事件与事件处理函数的对应关系。用户触发事件并响应浏览器。浏览器包含前端路由和事件处理功能。用户向前端路由触发事件，响应事件处理函数，事件函数将相应的内容渲染给用户。简单前端路由的实现是基于url中的hash。当点击菜单时，url的hash值发生变化，根据hash的变化控制组件的切换。监听window的onhashchange事件，根据最新获取的hash值切换显示的组件名称window.onhashchange=function(){//通过location.hash获取最新的hash值}简单示例：//切换组件超链接首页技术金融娱乐//:is属性指定的组件名称，将对应的组件渲染到组件标签的位置//即可设置组件标签的当前组件
位定义了四个组件constzhuye={template;'
da1
'}constkeji={template:'
da2
'}constcaijing={template:'
da3
'}constyule={template:'
da4
'}注册组件constvm=newVue({el:'#app',data:{},//注册组件components:{zhuye,keji,caijing,yule}})动态切换
data:{comName:'zhuye'}监听窗口的onhashchange事件，根据最新获取的窗口哈希值切换要显示的组件名称。onhashchange=function(){//通过location.hash获取最新的hash值console.log(location.hash);}href="#/zhuye"使用switch判断switch(location.hash.slice(1){case'/zhuye':vm.comName='zhuye'break;case'/keji':vm.comName='keji'break;case'/caijing':vm.comName='caijing'break;case'/yule':vm.comName='yule'break;}vue-router是vuerouter和vue.js核心的深度融合.方便spa应用开发，其功能包括：支持HTML5history模式，hash模式；支持嵌套路由；支持路由参数，支持programmatic路由，支持named路由、navigationguards、路由元素的高级路由信息、transition效果，数据获取，滚动行为，路由懒加载。vue-router的基本使用步骤，第一步引入相关库文件，第二步添加路由连接，第三步添加路由填充位，第四步，定义路由组件，第五步，配置路由规则，创建路由实例，第六步，将路由挂载到vue根实例。在router-link中，to表示目标路由的链接，repalce，点击时会调用router.replace()而不是router.push()，导航后不会留下历史记录。append，在当前路径之前添加基本路径。我们从/a导航到一个相对路径da，如果没有配置append，路径就是/da，如果配置了，就是/a/da基本使用步骤，第一步引入相关库文件//导入vue文件，挂载全局窗口对象的vue构造函数//导入vue-router文件，为全局窗口对象挂载vuerouter构造函数添加第二步中的路由链接//router-link是vue中提供的标签，默认会渲染成标签//to属性默认会渲染成href属性//to属性会渲染成hash地址at#开头默认为UserRegister第三步添加路由填充//路由填充，称为路由占位符//组件s以后要被路由规则匹配//会渲染到router-view所在的位置第四步，添加定义路由组件。如果有两条路由，添加两个组件varUser={template:'user
'}varRegister={template:'register
'}第五步，最重要,就是配置路由规则和创建路由Example//创建一个路由实例对象varrouter=newVueRouter({//routes是一个路由规则数组routers:{//每条路由规则是一个配置对象，其中至少包含path和component的两个属性//path代表当前路由规则匹配的hashaddress{path:'/user',component:User},{path:'/register',component:Register}}}第六步，将路由挂载到vue根实例newVue({el:'#app',//为了使路由规则生效，必须在vue实例对象router上挂载路由对象});路由重定向值是当用户访问地址a时，强制用户跳转到地址c，从而显示特定的组件页面，通过路由规则的redirect属性指定一个新的路由地址，就可以很方便的设置路由的重定向varrouter=newVueRouter({routers:[//其中path表示需要重定向的原地址，redirect表示要重定向的新地址{path;'/',redirect:'/user'},{path:'/user',component:User},{path:'/register',component:Register}}})vue-routernestedrouting嵌套路由，是什么？在父级路由下具有子级的路由。点击父路由链接显示模板内容，模板内容有子级路由链接，点击子级路由显示子级模板内容。第一步创建父路由组件模板，父路由链接和父组件路由的填充位置xxxxx
//控制组件的显示位置
第二步是创建子级路由模板，子级路由链接，子级路由paddingconstRegister={template;`dada
xxxxx//子路由填充位置`}第三步是嵌套路由的配置，parentRouting通过children属性配置子路由constrouter=newVueRouter({routes:[{path:'/user',component:User},{path:'/reg',component:Register,//通过children属性，为/register添加子路由规则children:[{path:'/reg/p1',component:p1},{path:'/reg/p2',component:p2}]}]})创建子路由链接，子路由放置占位符时，不要忘记写代码对于子组件。comstp1={template:'da
'}vue-router动态路由匹配什么是动态路由匹配，为什么需要动态路由匹配？场景如下da1da2da3{path:'/user/1,component:user}{path:'/user/2,component:user}{path:'/user/3,component:user}动态参数,:idvarrouter=newVueRouter({routes:[//动态路径参数以冒号开头{path:'/user/:id',component:User}}})constUser={//路由组件传入$route.params获取路由参数template:'U{{$route.params.id}}
'}路由组件传入参数props，将props的值设置为Boolean类型constrouter=newVueRouter({routes:[//如果props设置为true，route.params将被设置为组件属性{path:'/user/:id',component:User,params:true}]})constuser={props:['id'],//使用props接收路由参数template:'da{{id}}
'//使用路由参数}props的值可以是一个对象类型参数，并传递动态parametersconstrouter=newVueRouter({routes:[//如果props是一个对象，它将被原样设置为组件属性{path:'/user/:id',component:User,props:{name:'dada',age:12}}]})constUser={props:['name','age'],template:`{{name}}+{{age}}
`}props的值是一个函数类型的参数constrouter=newVueRouter({routes:{//如果props是一个函数，这个函数接收路由对象作为它的形参{path:'/user/:id',component:Use,props:route=>{{name:'dada',age:12,id:route.params.id}}}}})constUser={props:{'name','age','id'},template:`{{name}}+{{age}}+{{id}}
`}什么是namedrouting的名称routing可以指定命名名称，不需要写path命名路由配置规则//路由导航constrouter=newVueRouter({routes:[{path:'/user/id',name:'user',component:User}]})dadarouter.push({name:'user',params:{id:1}}}编程时的导航，首先，声明式导航是通过点击一个链接来实现的，比如作为网页中的a标签或vue中的router-link标签；第二，程序化导航是通过JavaScriptAPIs方式实现的，比如网页中的location.href。//程序化导航this.$router.push('hashaddress'this.$router.go(n)constUser={template:'跳转
',methods:{goButton:function(){//以编程方式控制路由跳转this.$router.push('/register');}}}constda={template:`Back
`方法：{goBack(){this.$router.go(-1)}}}router.push()方法router.push('/dada')router.push({path:'/dada'})router.push({name:'/dada',params;{id:1}})router.push({path:'/dada',query:{name:'dada'}})case，用的很多，路由的基本语法，嵌套路由，路由重定向，路由参数，程序化导航等。Vue-router默认是hash方式，使用url的hash来模拟一个完整的url，当url改变时，页面不会重新加载constrouter=newVueRouter({mode:'history',routes:[...]})命名视图过渡效果参考链接https://router.vuejs.org/zh/Finally，欢迎加我微信（xiaoda0423），拉你进技术群，长期交流学习……欢迎关注“达达前端”，认真学习前端，做一个专业的技术人...在博客平台上，还有很长的路要走，希望大家多多支持我以后的文章，多多批评指正，我们一起进步，一起走这条路。非常感谢阅读本文的读者。如果这篇文章写得好，如果你觉得“达达”有什么，如果你觉得我可以坚持学习，如果你觉得这个人可以交到朋友，请点赞关注分享，对暖暖我真的很有用！！！推荐阅读：2019的每一天，只为等她出现，过余生，过年|掘金年度作文一篇带你看懂JavaScript中的变量、作用域和内存问题一篇带你看懂JavaScript中的语法、数据类型、流控语句和函数一道经典的JS闭包面试题，经常做错。感谢您阅读。写作的最大动力。意见反馈如果本账号内容有问题（例如：涉及版权或其他问题），请及时联系我们进行整改，我们会尽快处理。这是一种品质，态度公众号关注，祝你好运
