Vue_router在项目中的应用

路由分类

$router            => 路由器
$route         => 当前路由

创建一个项目

vue init webpack xxx

此时的router配置

import Vue from 'vue'                               // 引入Vue
import Router from 'vue-router'                      // 引入Vue_router         
import HelloWorld from '@/components/HelloWorld'      // 引入组件

Vue.use(Router)                                     // 关联Vue

export default new Router({                         // 创建router实例
  routes: [
    {
      path: '/',                                    // 路由地址
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

路由懒加载

import Vue from 'vue'                                       // 引入Vue
import Router from 'vue-router'                              // 引入Vue_router         
*************************************************
const HelloWorld = () => import('@/components/HelloWorld')     // 懒加载引入组件
*************************************************
Vue.use(Router)                                            // 关联Vue

export default new Router({                                 // 创建router实例
  routes: [
    {
      path: '/',                                           // 路由地址
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

Vue是单页面应用，不可避免的面临首次加载过慢的问题，此时可以通过路由懒加载进行一部分优化，加快首屏打开速度

路由的mode属性

import Vue from 'vue'                                       // 引入Vue
import Router from 'vue-router'                              // 引入Vue_router         
const HelloWorld = () => import('@/components/HelloWorld')     // 懒加载引入组件
Vue.use(Router)                                            // 关联Vue

export default new Router({                                 // 创建router实例
  ******************************************
  mode: hash,                                              // 路由模式
  *******************************************
  routes: [
    {
      path: '/',                                           // 路由地址
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

常用的mode模式有两种：

默认为hash模式，最明显的标志是，URL上有#号 localhost:8080/#/，路由会监听#后面的信息变化进行路由匹配

另一种为history模式，不会有#出现，很大程度上对URL进行了美化。需要**注意**history模式在打包后的路由跳转需要服务器配合

自定义路由

如果需要在路由前动态拼接字符串，如何才能自定义路由呢

import Vue from 'vue'                                       // 引入Vue
import Router from 'vue-router'                              // 引入Vue_router         
const HelloWorld = () => import('@/components/HelloWorld')     // 懒加载引入组件

*********************************************************
class HarvardRouter extends Router {                        // 继承router
  constructor (args) {
    const prefixSkipList = [
      '*',
      '/',
      '/hmmchina'
    ]
    if ('routes' in args) {
      args.routes.forEach((ar) => {
        if (prefixSkipList.indexOf(ar.path) === -1) {
          ar.path = `/hmmchina${ar.path}`
        }
      })
    }
    super(args)
  }

  push (location, onComplete, onAbort) {
    super.push(this._harvardUrl(location))
  }

  replace (location, onComplete, onAbort) {
    super.replace(this._harvardUrl(location))
  }

  // 处理路由地址
  _harvardUrl (url) {
    if (Object.prototype.toString.call(url) === '[object Object]') {
      url.path = this._harvardUrlName(url.path)
      return url
    }
    return this._harvardUrlName(url)
  }

  // 处理路由名
  _harvardUrlName (name) {
    // name 为空不做任何处理
    if (name) {
      // 规范以 / 开头
      name = name.charAt(0) !== '/' ? `/${name}` : name
      return `/hmmchina${name}`
    }

    return name
  }
}

Vue.use(HarvardRouter)  

export default new HarvardRouter({                                  // 创建router实例
  ******************************************
  mode: hash,                                              // 路由模式
  routes: [
    {
      path: '/',                                           // 路由地址
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

动态路由匹配

this.$router.push({
    path: '/xxx',
    query: {
        xxx: 1
    }
})

路由跳转有多种形式，建议统一使用编程式动态路由匹配

获取路由信息

this.$route                // 为当前页面路由
其包含的query即为动态路由传入的参数

路由的生命周期

• [ ] beforeRouteEnter

  • [ ] 路由跳转至当前页面前的回调
  • [ ] 不能获取到实例的this，但是可以通过next()传参调用this
  • [ ] 一定要调用next()否则不会跳转

  beforeRouteEnter (to, from, next) {
    setTimeout(() => {
      // next(vm => vm.changeAll())
      next(vm => console.log(vm))
    }, 1000)
  
    console.log('beforeRouteEnter 创建前状态开始===============》')
    console.table([
      ['to', to],                 // 即将进入的目标对象
      ['from', from],             // 正在离开的目标对象
      ['next', next],             // 跳转方法
      ['this', this]              // 不能访问到this 值为undefined
    ])
    console.log('beforeRouteEnter 创建前状态结束===============》')
  },

• [ ] beforeRouteUpdate

  • [ ] 嵌套路由更新时调用 /foo/1和 /foo/2之间跳转的时候
  • [ ] 可以获取到this
  • [ ] 一定要调用next()否则不会跳转

  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate 创建前状态开始===============》')
    console.table([
      ['to', to],
      ['from', from],
      ['next', next],
      ['this', this]
    ])
    console.log('beforeRouteUpdate 创建前状态结束===============》')
    next()
  },

• [ ] beforeRouteLeave

  • [ ] 导航离开该组件的对应路由时调用
  • [ ] 可以获取到this
  • [ ] 一定要调用next()否则不会跳转

  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave 创建前状态开始===============》')
    console.table([
      ['to', to],
      ['from', from],
      ['next', next],
      ['this', this]
    ])
    console.log('beforeRouteLeave 创建前状态结束===============》')
    next()
  }