现在的很多应用都流行 SPA 应用（singe page application) 。
传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个 html 文件的跳转，这个时候因受到网络、性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。
而单页应用则是用户通过某些操作更改地址栏 url 之后，动态的进行不同模板内容的无刷新切换，用户体验好。
而在 vue2.0 版本后，vue 官方推出 vue-router 插件来实现单页面的路由跳转，内部原理就是通过组件之间的切换（组件的卸载与安装）去实现整个页面无刷新的效果。
一．项目引入路由并配置：
1.在 vue 项目中，通过 cnpm 或者 yarn 的方式进行 vue-router 的安装
cnpm i vue-router -Syarn add vue-router -S
复制代码
点击并拖拽以移动
2.接下来需要在入口文件 main.js 里面进行路由的引入与注册
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)
复制代码
点击并拖拽以移动
3. 创建 router 路由器
new Router({ routes:[ {path:"",component:} ] })
复制代码
点击并拖拽以移动
4. 创建路由表并配置在路由器中
var routes = [//path为路径，component为路径对应的路由组件 {path,component} ] new Router({ routes })
复制代码
点击并拖拽以移动
5. 在根实例里注入 router,目的是为了让所有的组件里都能通过 this.$router、this.$route 来使用路由的相关功能 api
new Vue({ el: '#app', router, template: '<App/>', components: { App } })
复制代码
点击并拖拽以移动
6. 利用 router-view 来指定路由切换的位置
7. 使用 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、nextto:即将要进入的目标对象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 里面的核心技术点，需要在项目中不断的练习、具体到业务逻辑中使用才能更好的理解、渗透，其次多加记忆、巩固才可更加清晰。
评论