好程序员Web前端干货详解Vue-Router路由与配置，很多应用都是现在流行的SPA应用（单页应用）.大多数传统项目使用多页面结构。当我们需要切换内容时，往往会跳转到单个html文件。此时，由于网络和性能的影响，浏览器会无限期显示空白界面，用户体验不好。对于单页应用，用户通过一些操作更改地址栏中的url后，不同模板的内容动态切换，无需刷新，用户体验好。在vue2.0版本之后，vue正式推出了vue-router插件来实现单页的路由跳转。内部原理是通过组件之间的切换（组件的卸载和安装）达到整个页面不刷新的效果。一。项目导入路由和配置：1.在vue项目中，通过cnpm或者yarncnpm安装vue-routerivue-router-Syarnaddvue-router-S2.接下来需要在入口文件main.js中导入并注册路由importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)createrouternewRouter({routes:[{path:"",component:}]})创建路由表并配置itintheroutervarroutes=[//path是路径，component是路径{path,component}对应的路由组件]newRouter({routes})在根实例中注入router，目的是让allcomponents可以通过this.$router,this.$route来使用路由apinewVue的相关功能({el:'#app',router,template:'',components:{App}})使用router-view指定路由开关的位置。使用router-link创建一个switch工具，会被渲染成一个标签，添加to属性设置要改变的路径信息，根据当前路由改变，将对应的router-添加到a标签中。link-active/router-link-exact-active（精确匹配成功）类名mainnews.router-link-active{color:red;}二。项目中多级路由配置：1、创建路由表时，可以为每个路由对象创建一个children属性，值为数组。在此，可以配置一些路由对象使用多级路由。注意：只能在一级路由的路径前加'/'constroutes=[{path:'/home,component:Home},{path:'/list',component:List,children:[{path:'inner',component:Inner},{path:'outer',component:Outer}]},]2.次级路由组件的切换位置还是由router-view来指定（在父路由组件的模板中指定）innerouter但是发现当路由路径为多级时，不利于快速定位路由的匹配组件。因此，上面的代码可以通过命名路由来实现。我们可以为路由对象配置name属性。当我们在跳转的时候直接写name:inner，我们会很快找到name属性对应的路由，不需要写大量的urlpath路径。如下图：{path:'inner',component:Inner,name:'inner'}这样我们就可以很方便的根据不同的路由在组件之间进行映射。但是在做大型项目开发的时候，我们也会发现routes里面写了很多routes，这样会让router文件很大，不利于维护和管理。另外，如果使用这种方式，当用户打开首页时，由于webpack对其进行了打包，加载的内容异常多，导致打开速度非常慢。所以我们需要通过延迟加载来导入我们的路由：constroutes=[homeRouter]//exportdefultinthehomeRouter.jsfile{Name:'homeRouter',Path:'/home'component:()=>import('./我的异步组件')}}3。Vue-Router的路由守卫：在项目开发中，我们经常会做一些路由跳转前后的操作。比如我们可以使用vue-router中提供的路由守卫结合axios拦截器来实现项目的登录拦截等操作。Vue-router中提供的路由守卫可以分为三类，分别是全局路由守卫、单个路由钩子的路由守卫和路由组件内部的路由守卫。好，我们依次来看：1.通过router.beforeEach或者router.afterEach注册一个全局守卫：1-1router.beforeEach((to,from,next)=>{//会在任何路由跳转之前执行,next一定要记得执行，否则路由无法跳转next()})guard方法需要接受三个参数：to,from,nextto：即将进入的目标对象from：当前导航所要进入的路由离开下一步：必须调用这个方法来解决这个钩子。执行效果取决于next方法的调用参数。1-2//Router.afterEach((to,from)=>{})会在任意路由跳转后执行2.单路由hookguard：进入前只执行beforeEnter，to参数为当前路由routes：[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{//next也要写}}]3.路由组件hookguard:beforeRouteEnter(to,from,next){//这个不能在内部调用。调用此路由时，组件还没有初始化},beforeRouteUpdate(to,from,next){//内部可以访问组件实例`this`//路由内部动态参数发生变化，组件isresetusing时调用（/list/1跳转到/list/2，详细组件复用时调用）},beforeRouteLeave(to,from,next){//可以访问组件实例`this`，进入路由时离开这个组件}以上就是Vue-Router中的核心技术点。需要在项目中不断实践，在业务逻辑中具体运用，才能更好地理解和渗透。其次，更多的记忆和巩固可以使它更清晰。
