Vue Router

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

    <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
二.// 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')

// 现在，应用已经启动了！
三.通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由
// Home.vue
export default {
  computed: {
    username () {
      // 我们很快就会看到 `params` 是什么(当前路由用this.$route)
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}
//  动态路由匹配：
            1.响应路由参数的变化：
              id不同用户都需要同一个组件来渲染，通过在路由路径中使用‘动态路径参数’实现--routes:[{path:'user/:id,component:User}]
               一个‘路径参数’使用冒号 ： 标记，匹配到一个路由时，参数值会被设置到 this.$route.params
            2.捕获所有路由或404not found路由：
                    含有通配符的路由应该放在最后；
                    当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数，它包含了 URL 通过通配符被匹配的部分
            3.高级匹配模式：path-to-regexp
            4.匹配优先级：谁先定义的，谁的优先级就最高
    嵌套路由：要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置；
            以 / 开头的嵌套路径会被当作根路径；
            如果你想要渲染点什么，可以提供一个空的子路由；
    编程式的导航：想要导航到不同的url,则使用router.push(location, onComplete?, onAbort?)方法，等同于声明式<router-link :to="...">
                如果提供了 path，params 会被忽略，同样的规则也适用于 router-link 组件的 to 属性；
                router.replace(location, onComplete?, onAbort?)不会向 history 添加新记录，替换掉当前的 history 记录，
                声明式：<router-link :to="..." replace>   编程式：router.replace(...)；
                router.go(n)：在 history 记录中向前或者后退多少步
    命名路由：在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称；
            链接到一个命名路由，可以给 router-link 的 to 属性传一个对象，跟代码调用router.push()是一回事。
    命名视图：如果 router-view 没有设置名字，那么默认为 default
    重定向和别名：重定向用redirect ，访问 /a时，URL 将会被替换成/b，然后匹配路由为/b。
                别名用alias：（/a的别名是/b）用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a；
                “别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
    路由组件参数：使用props将组件和路由解耦；对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项
                布尔模式：如果props被设置为true,route.params将会被设置为组件属性
                对象模式：如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
                函数模式：你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
    HTML5 History模式：vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，
                       页面不会重新加载。 然而路由的 history 模式history.pushState API 来完成 URL 跳转而无须重新加载页面。
vue Router进阶  
    导航守卫-参数或查询的改变并不会触发进入/离开的导航守卫。
        全局前置守卫：router.beforeEach注册一个全局前置守卫 router.beforeEach((to, from, next) => {})，确保要调用 next 方法，否则钩子就不会被 resolved                
        全局解析守卫：router.beforeResolv注册一个全局守卫，在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
        全局后置钩子：router.afterEach((to, from) => {})这些钩子不会接受 next 函数也不会改变导航本身。
        路由独享的守卫：在路由配置上直接定义 beforeEnter 守卫。
        组件内的守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave；beforeRouteEnter守卫不能访问this，是支持给 next 传递回调的唯一守卫。
        完整的导航解析流程：
                    导航被触发。
                    在失活的组件里调用离开守卫。
                    调用全局的 beforeEach 守卫。
                    在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
                    在路由配置里调用 beforeEnter。
                    解析异步路由组件。
                    在被激活的组件里调用 beforeRouteEnter。
                    调用全局的 beforeResolve 守卫 (2.5+)。
                    导航被确认。
                    调用全局的 afterEach 钩子。
                    触发 DOM 更新。
                    用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
    路由元信息：routes 配置中的每个路由对象为 路由记录。遍历 $route.matched 来检查路由记录中的 meta 字段。
    过渡动效：
            单个路由的过渡：每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name
            基于路由的动态过渡：使用动态的 transition name，接着在父组件内watch $route 决定使用哪种过渡
    数据获取：导航完成之后获取（组件生命周期钩子中获取数据）和导航完成之前获取（在路由进入的守卫中获取数据）
    滚动行为：这个功能只在支持 history.pushState 的浏览器中可用。scrollBehavior 方法接收 to 和 from 路由对象，
            第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
    路由懒加载：
            首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：
            const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
            第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：
            import('./Foo.vue') // 返回 Promise
            如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
            结合这两者：const Foo = () => import('./Foo.vue')；
                       const router = new VueRouter({
                            routes: [
                                { path: '/foo', component: Foo }
                            ]
                        })