好程序员Web前端干货详解Vue-Router路由与配置

好程序员Web前端干货详解Vue-Router路由与配置，如今的不少应用都流行SPA应用（singe page application) 。传统的项目大多使用多页面结构，须要切换内容的时候咱们每每会进行单个html文件的跳转，这个时候因受到网络、性能的影响，浏览器会出现不定时间的空白界面，用户体验很差。而单页应用则是用户经过某些操做更改地址栏url以后，动态的进行不一样模板内容的无刷新切换，用户体验好。而在vue2.0版本后，vue官方推出vue-router插件来实现单页面的路由跳转，内部原理就是经过组件之间的切换（组件的卸载与安装）去实现整个页面无刷新的效果。
一．项目引入路由并配置：
1.在vue项目中，经过cnpm或者yarn的方式进行vue-router的安装
cnpm i vue-router -S
yarn add vue-router -S

2.接下来须要在入口文件main.js里面进行路由的引入与注册
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)

1. 建立router路由器
   new Router({
   routes:[

   {path:"",component:}

   ]
   })

2. 建立路由表并配置在路由器中
   var routes = [

//path为路径，component为路径对应的路由组件

{path,component}
]
new Router({
    routes
})

1. 在根实例里注入router,目的是为了让全部的组件里都能经过this.$router、this.$route来使用路由的相关功能api
   new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { App }
   })
2. 利用router-view来指定路由切换的位置
3. 使用router-link来建立切换的工具，会渲染成a标签，添加to属性来设置要更改的path信息，且会根据当前路由的变化为a标签添加对应的router-link-active/router-link-exact-active（彻底匹配成功）类名

<router-link to="main">main</router-link>
<router-link to="news">news</router-link>
.router-link-active{

color:red;

}

二．项目中多级路由配置：
1.在建立路由表的时候，能够为每个路由对象建立children属性，值为数组，在这个里面又能够配置一些路由对象来使用多级路由，注意：只在一级路由的path前加 '/ '
const routes = [
{path:'/home,component:Home},
{path:'/list',component:List,children:[

{path:'inner',component:Inner},
{path:'outer',component:Outer}

]},
]
2.二级路由组件的切换位置依然由router-view来指定（指定在父级路由组件的模板中）
<router-link to='/home/inner'>inner</router-link>
<router-link to='/home/outer'>outer</router-link>
<router-view></router-view>

可是这样发现当路由路径多级的时候，不利于快速定位路由匹配的组件。因此，能够经过命名路由的方式去实现以上代码。

咱们能够给路由对象配置name属性，当咱们在跳转的时候直接写name:inner就会快速的找到此name属性所对应的路由，不须要写大量的urlpath路径了。以下所示：
{path:'inner',component:Inner,name:'inner'}

这样的话，咱们就能够方便的根据路由的不一样进行组件之间的映射。可是，作大型项目开发的时候，咱们也会发现不少的路由写在routes这个里面，会让router这个文件变得很大不利于维护管理。除此以外，若是经过这样的方式还会致使当用户打开首页的话，由于webpack打包的时候，加载内容异常的多致使打开速度很慢。因此咱们须要对咱们的路由采起懒加载的方式进行引入：

const routes = [
homeRouter
]

//homeRouter.js文件里面
export defult {
Name:’homeRouter’,
Path:’/home’
component:() => import('./my-async-component')}
}

三．Vue-Router的路由守卫：
在项目开发中，咱们常常会在路由跳转先后作一些操做。例如咱们能够经过利用vue-router里面提供的路由守卫结合axios拦截器实现项目的登陆拦截等操做。Vue-router里面提供的路由守卫能够分为三大类，分别是全局路由守卫、单个的路由钩子的路由守卫、路由组件内部的路由守卫。好，咱们依次来看：
1.经过 router.beforeEach 或者router.afterEach注册一个全局守卫：
1-1
router.beforeEach((to, from, next) => {

//会在任意路由跳转前执行，next必定要记着执行，否则路由不能跳转了

next()
})
守卫方法须要接受三个参数：to、from、next
to:即将要进入的目标对象
From:当前导航正要离开的路由
Next: 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

1-2
//会在任意路由跳转后执行
Router.afterEach((to,from)=>{
})

2.单个路由钩子守卫：
只有beforeEnter，在进入前执行，to参数就是当前路由
routes: [

{
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
    // next也是必需要写的
  }
}

]

3.路由组件钩子守卫：
beforeRouteEnter (to, from, next) {

//内部不能调用this  当这个路由调用时，组件没有被初始化

},
beforeRouteUpdate (to, from, next) {

// 内部能够访问组件实例 `this`

//路由内部动态参数改变了，组件被复用的时候调用（/list/1跳入/list/2,详情组件复用的时候）
},
beforeRouteLeave (to, from, next) {

// 能够访问组件实例 `this`  路由离开这个组件的时候进入

}以上就是Vue-Router里面的核心技术点，须要在项目中不断的练习、具体到业务逻辑中使用才能更好的理解、渗透，其次多加记忆、巩固才可更加清晰。