vue-router 使用方法

本文大部分内容来自 官网，对官网使用的一个总结。

基本使用

路由的使用方法还是有几步去设置的，我猜很多小伙伴和我一样，不去好好总结一下可能真的记不住啊。其中使用方法分Html和Javascript两部分。

HTML

   <div id="app">
        <h1>Hello App</h1>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo/panhe">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

最外层用id='app'的div包裹，是为了vue实例挂载的容器，不用多说。在内部做了2件事情：

• 定义导航组件。使用vue-router组件库暴露出来的<router-link>组件来定义导航标签，其中通过to属性来指定跳转的链接。router-link最终会被编译成<a>标签。
• 定义渲染位置。使用vue-router组件暴露出来的<router-view>组件来控制渲染位置。当浏览器的路劲和我们的路由列表中的一个匹配的时候，就会把对应的组件渲染在router-view的位置。

Javascript

    // 1. 定义 (路由) 组件。
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    const routes= [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar },
    ]
    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes
    })
    // 4. 创建和挂载根实例。
    const app = new Vue({
        router
    }).$mount('#app')

js这部分做了4件事情：

1. 定义匹配到路由时候的组件
2. 定义路由列表。每一个路由是对应一个渲染的组件。
3. 用VueRouter创建router实例。其中第二步的路由列表作为参数
4. 创建vue实例并且挂载router对象

动态路由

当某个模板的路由全部映射到同一个组件的时候，使用动态路由。同时，动态路由也是组件传递参数的一种方式。他的使用方式是这样：

const User = {
  template: '<div>User {{$route.params.id}}</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。除了 $route.params外，$route对象还提供了其他信息。例如，$route.query(url中有查询参数) 。 这种情况下，路由变化对应的组件更新是比较特殊的，监听路由变化的具体情况点这里

嵌套路由

任何一个稍微大点的应用都是会有嵌套路由出现的。楼主借嵌套路由来说说目前见过的大部分前端架构。其中会有个APP.vue文件的，然而这个文件大部分的时候功能只是提供最外层的一层router-view，像下面这样

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  },
  components: {
  },
  methods: {
  }
}
</script>
<style lang="less">
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
mode:'history',
base: publicPath,
routes: [
    { 
      path:'/',
      redirect:'/home',
      component:index,
      name:'index',
      children:[{
              path:'/',
              redirect:'/home',
              component:home,
              name:'home'
       }]
    },{
      path:'/login',
      component:login,
      name:'login',
      meta:{
          title:'登录'
      }
    }
]})

在router.js中当匹配name: 'index'和或者name:'login'的路由的时候都会渲染到App.vue中。当然同级的路由都是对应到App.vue这层router-view。
此时，主要的布局写在component: home，home组件大致内容类似这样。

<template>
    <div>
      <el-container>
      	<el-header calss="el-header"></el-header>
        <el-container>
           <menu></menu>
            <el-main>
              <div class="tags"></div>
              <el-dropdown></el-dropdown>
              <el-scrollbar>
                  <router-view></router-view>
	       </el-scrollbar>
            </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script type="text/javascript">
export default {
    components: {},
    data: funtion() {},
    methods: {},
    computed: {},
    watch: {}
}
</script>
<style type="text/css" lang="less"></style>

可以看出来，在home组件里面，我们可以定制自己的头部组件和菜单栏组件(这里可以做权限控制)，然后最后有一个router-view的组件，作用是渲染home的子组件，此时就是出现了嵌套路由了。
业务路由都是写在home子组件中。目前前端大部分架构其实都差不多是这个思路，不管是vue还是react(仅限于楼主接触过的)。

编程式导航

正常在页面里面使用的是router-link去进行跳转的，所谓编程式导航就是使用 this.$router对象提供的一系列方法去跳转页面。
router对象的方法总结如下：

push

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.repalce 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样

go

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的

基本的功能介绍这么，更多基本功能看官网，接下来介绍下一些进阶的方法。

进阶

导航守卫

所谓导航守卫就是一系列路由钩子函数，在对应时间触发处理不同事情。
其中导航守卫分三种：

1. 全局的
2. 单个路由的
3. 组件级别的

全局守卫

1. router.beforeEach
2. router.beforeResolve
3. router.aftereEach

路由独享守卫

1. beforeEnter

组件内的守卫

1. beforeRouteEnter
2. beforeRouteUpdate
3. beforeRouteLeave

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

路由元信息

所谓路由元信息指路由对象中的meta信息。在这个里面可以设置一些权限信息，或者其他有关信息。楼主之前就接触过在每个左侧栏上显示代办数字，于是设置哪些路由需要显示的时候就设置在这些meta里面。其他需求类型即可。
因为匹配到具体路由的时候也会包括起父路由的信息，所以如下方法可以拿到meta信息：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

路由懒加载

路由懒加载设置很简单，只需要把引入组件改成如下形式即可：

const Foo = () => import('./Foo.vue

其他什么都不用变。这是结合vue异步组件和webpack切割功能实现的

注意：如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。