Vue-router的安装及使用

简单整理了vue-router的使用（未完），备忘。

Vue中的路由：
    --Vue-router的使用：
        1：安装Vue-router：
            npm install vue-router --save
        2：在main.js中引入Vue.use(VueRouter)
            import VueRouter from 'vue-router'
            Vue.use(VueRouter)
        3：配置路由：
            --1：创建组件，引入组件
            --2：定义路由（建议从官网复制）
                const routes = [
                  { path: '/foo', component: Foo },
                  { path: '/bar', component: Bar }
                ]
            --3：实例化VueRouter
                const router = new VueRouter({
                    routes // (缩写) 相当于 routes: routes
                })
            --4：挂载路由
                // 记得要通过 router 配置参数注入路由，
                // 从而让整个应用都有路由功能
                const app = new Vue({
                  router
                }).$mount('#app')
            --5：挂载的跟组件template中使用
            <div id="nav">
              <router-link to="/">Home</router-link> |
              <router-link to="/about">About</router-link> |
              <router-link to="/me">Me</router-link> |
              <router-link to="/test">Test</router-link>
            </div>
            <router-view />
    --重定向：
        重定向也是通过 routes 配置来完成。
        下面例子是从 /a 重定向到 /b：
            const router = new VueRouter({
              routes: [
                { path: '/a', redirect: '/b' }
              ]
            })
            默认寻找不到，重定向到首页：
            {
              path:"*",
              redirect:Home
            }
    --HTML5 History 模式：
        vue-router默认的hash模式使用url的hash来模拟一个完整的url，
        于是当url改变时，页面不会重新加载。（url带一个#号）
        如果不想要很丑的hash，我们可以用路由的history模式，
        这种模式充分利用history。pushState API来完成url的跳转而无需重新加载页面。
        使用方式：
            只需在new vuerouter时传入参数：mode:'history'即可。
        不过这种模式要玩好，还需要后台配置支持，因为我们的应用是个单页面客户端应用，
        如果后台没有正确的配置，当用户直接访问就会返回404.
        所以，需要在服务端增加一个覆盖所有情况的候选资源，如果url匹配不到任何静态资源，则应该返回同一个index.html，这个页面就是APP依赖的页面。
    --编程式导航：
        vue中除了可以通过<router-link>创建a标签来导航外，我们还可以借助router的实例方法，通过js代码来实现。
        在Vue实例内部，我们可以通过$router访问路由实例。因此可以通过this.router.方法来调用一些路由方法。
        --router.push()方法：
            语法：router.push(location,onComplete?,onAbort?)
                参数：
                    location：路由地址（可以是一个字符串路径或者一个描述地址的对象。）
                        例如：.push("./home")或者.push({path:'home'})
                    onComplete：加载后的事件
                    onAbort：对中止事件的处理
                    onComplate和onAbort回调作为第二个和第三个参数。这些回调将会在导航成功完成后（在所有的异步钩子被解析之后）
                    或终止（导航到相同的路由或在当前导航完成之前导航到另一个不同的路由）的时候进行相应的调用。
            router.push()方法回向history（历史）栈中添加一个新的记录，所以当用户点击浏览器后退按钮时，则回到之前的url。
            当我们点击<router-link>时这个方法实际上会在内部被调用，所以说<router-link :to="">等同于调用router.push()
        --router.replace()：
            语法：router.replace(location,onComplate?,onAbort?)
            和push()功能很像，不同的是replace不会向history添加新记录，与他的方法名一样--替换掉当前的history记录。
            声明式（在router-link标签后添加replace属性）：
                <router-link :to="" replace>
            参数：同push()方法
        --router.go(n)：
            router.go()方法的参数是一个整数，意思是在history记录中向前或则向后退多少步，类似window.history.go(n)。
            使用实例：
                router.go(1)：在浏览器记录中前进一步，等同于history.forward()。
                router.go(10)：在浏览器记录中前进10步，等同于history.forward()
                router.go(-1)：在浏览器记录中后退一步，等同于history.back()。
            注：如果步数不够那么执行将会失败，没有任何效果。