vue router入门

基本使用

其实vue全家桶学起来还是很简单的，只要了解了vue的思路，顺着思路学习很easy。

// 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }


// 关键部分
const app = new Vue({
  //vue中使用router需要指定一个router属性，这个属性的值要是VueRouter的对象
  router: new VueRouter({
      //实例化VueRouter，需要给routes属性，传入一个路由的配置信息，是一个对象数组
      routes: [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
      ]
    })
}).$mount('#app')

// 现在，应用已经启动了！

看到代码的注释，就可以明白如何使用了吧，下面我们来对代码进行一下拆分，方便管理。而且可以使用全局路由钩子，上面的写法是无法使用全局路由钩子的，因为他直接进入了vue内部。我们只能在组件内取得路由对象了。

下面看一下官方的代码，这是经过了拆分的

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
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 // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

看到上面的例子，我们就明白使用路由分4步（0步不算，引入vue和vue-router是必须的）。
在第一步，我们定义了一些对象，也可以使用import引入。
从第2步开始，主角登场啦。routes中定义了所有的路由，他是一个配置集合。
第3步将定义了一个router这是一个VueRouter对象（我们先叫他路由控制器）。
第4步创建一个vue对象，并将router(也就是VueRouter的对象注入)，至此所有任务完成。
像上面这种简单的例子，其实可以简写为一下方式
实例化后vue中会被注入两个对象

$router 这是router 实例可以使用所有router的方法和属性

$route 当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable（不可变） 的，不过你可以 watch（监测变化） 它。

在组件中使用

在组件中使用有两个参数

<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // 使用this.$route.params.id获取id参数
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

$route除了有params还有其他一些属性看这里https://router.vuejs.org/zh-cn/api/route-object.html
$router 的所有方法和属性看这里https://router.vuejs.org/zh-cn/api/router-instance.html
至于上面提到的钩子可以去这里看https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
本篇文章主要是介绍vue router的初始化，了解了初始化和组件内使用$route就理解了vue router的使用思路，看起官方文档也就有事半功倍的效果。