vue-router路由讲解

此文章用来系统讲解vue-router路由

1. 安装

   只介绍npm安装
   npm install vue-router --save 项目所需依赖
   在main.js或者app.vue中导入
   import Vue from 'vue';
   import VueRouter from 'vue-router';
   Vue.use(VueRouter);
   现在你就可以开始使用vue-router了
   

2. 结构

   先来简单的了解一下使用的结构，方便后面学习
   <router-link to="/foo">Go to Foo</router-link> 相当于a标签
   <router-view></router-view> 这时用来渲染匹配到的路由组件的
   下面就是具体的路由设置了
   const app = new Vue({
       router: new VueRouter({
           routes: [
               {path: '/foo',component: Foo} //匹配到路由'/foo'后渲染组件Foo
           ]
       })
   }).$mount("#app")
   很简单吧
   

3. 动态路由匹配

   说简单点，就是不同的路由值，访问同一个组件
   例如：
       const router = new VueRouter({
           routes: [
               { path: '/user/:id', component: User }
           ]
       })
       在 '/user/' 后面跟个 :id 表示这时可选的，就是说不管id是啥，都可以访问User组件
       并且这个id存放在this.$route.params中，并且可以有多个这样的可选值
   注意点: 在不同的路由值之间切换访问相同的组件，是不会重复渲染的，但是可以通过watch来做出响应
       const User = {
           watch: {
               '$route' (to,from) {
                   // 对路由变化做出响应
               }
           }
       }
       // 有没有觉得这个写法挺怪的，管他呢，能用就行O(∩_∩)O哈哈~
   

4. 嵌套路由

   嵌套路由很简单，就是匹配到某个路由值，渲染到一个组件，这个组件内部还有router-view，这时可以传递第二段路由值，加以匹配，如果不传递，可以设置一个空的二段路由值
   例子如下:
       const router = new VueRouter({
           routes: [{
               path: '/user/:id',component: User
           }]
       })
       /user/demo 这个路由值，可以匹配到User组件，如果User组件是如下的
       const User = {
           template: `
               <router-view></router-view>
           `
       }
       那么需要对路由配置做如下修改
       const router = new Router({
           routes: [
               {path: '/user/:id',component: User,
                children: [
                    {path: '',component: UserHome},
                    {path: 'profile',component: UserProfile}
                ]
               }
           ]
       })
   

5. 编程式导航

   简而言之，就是，使用js来实现router-link的功能
   使用 router.push ，此方法和router-link一模一样，回产生浏览记录，有如下几种形式，和router-link是等价的
       router.push('home')
       router.push({path: 'home'}) // 和上面等价
       router.push({name: 'user',params: {userId: 123}}) // 这个是命名路由，后面讲
       router.push({path: 'register',query: {plan: 'private'}}) // '/register?plan=private'
   使用router.replace(location)
       和router.push相似，只不过这里不会产生浏览记录，没卵用
   使用router.go(n) 
   

6. 命名路由

   命名路由是用来给懒人用的，给router-link传递to属性，使用path很长，很难写，所以，起个名字，方便写
   当某个路由配置是
   const router = new VueRouter({
       routes: [
           {
               path: '/user/:userId',
               name: 'user',
               component: User
           }
       ]
   })
   正常人是这样访问的 <router-link :to="/user/123"></router-link>
   懒人是这样访问的 <router-link :to="{name: 'user',params: {userId: 123}}"></router-link>
   咦。。。，好像还要多输入几个字符，不对，这是装逼用的
   

7. 命名视图

   这个玩意儿就是当匹配到一个路由值，同时渲染多个组件，很简单，看下面demo
   <router-view></router-view> //这个没有起名的默认就是 default
   <router-view name="a"></router-view>
   <router-view name="b"></router-view>
   const router = new VueRouter({
       routes: [
           {
               path: '/',
               components: {
                   default: Foo,
                   a: Bar,
                   b: Baz
               }
           }
       ]
   })
   // 这样同时就渲染出 Foo,Bar,Baz 三个组件了
   

8. 重定向和别名

   这两个概念也是很简单的
   重定向就是当访问一个路由值，定向到另外一个路由值，此即以假乱真，简单demo如下
   const router = new VueRouter({
       routes: [
           {path: '/a',redirect: '/b'}
       ]
   })
   别名就是起个其它的名字，其实方法的还是这个路由
   const router = new VueRouter({
       routes: [
           {path: '/a',component: A,alias: '/b'}
       ]
   })
   

9. HTML5 History模式

   这部分内容也是装逼专用，就是把url中的/#去掉，变好看一点，需要把其他不符合要求的路由值定位到主页上来，要不然就直接404，官网说这个功能要后台来实现，不过我觉得，可以直接用路由钩子实现，详见后述
   

10. 导航钩子

    这个功能很强大，可以在进行导航的过程的各个时间点做处理，很吊的
    有全局的，单个路由的，组件的
    1.先来看个全局的钩子，注册一个全局的before钩子
    const router = new VueRouter({...});
    router.beforeEach((to,from,next) => {
        // 可以注册多个before,多个before之间是异步的，但是导航必须等到这些钩子执行完成，才开始
        // to 目标路由对象
        // from 当前路由对象
        // next 有如下几种用法
        // next() 执行下一个钩子函数，没有钩子，则to到目标路由
        // next(false) 不to了，直接留在from这个路由
        // next('/') 不管这个to了，另找了一个to
        // next方法必须调用，不调用就是死循环，小心你电脑内存爆了
        // 记得刚开始学这个，我差点把电脑砸了
    })
    注册一个after钩子，这个作用不大，毕竟路由都跳转了，唯一的作用就是来看看而已
    router.afterEach(route => {
        // ...
    })
    2.单个路由的
    直接上demo了吧，简单
    const router = new VueRouter({
        routes: [{
            path: '/foo',
            component: Foo,
            beforeEnter: (to,from,next) => {
                //...
            }
        }]
    })
    3.组件内的
    这个也简单，不过比上面两个稍有点区别，上demo吧
    const Foo = {
        template: '...',
        beforeRouteEnter (to,from,next) {
            // 这里不能直接访问当前实例this,因为实例还没有渲染，不过可以通过next来访问
            next(vm => {
                // ...
            })
        },
        beforeRouteUpdate (to,from,next) {
            // 多个路由值访问同一个组件，来回切换，组件不会刷新，那么上面的这个钩子就没有了，此时这个钩子登场
        },
        beforeRouteLeave (to,from,next) {
            // 顾名思义，不介绍了
        }
    }
    

11. 路由元信息

    这玩意儿就是一个flag，用于遍历的时候找到特殊的路由，用处很小，这里不介绍了，感兴趣自己查去
    

12. 过渡动效

    就是在切换路由的时候展示动画，如果你懂vue的transition，这部分内容你根本就不用看，直接上手
    <transition>
        <router-view></router-view>
    </transition>
    

13. 数据获取

    在切换到其他路由，其他路由获取数据有两种方式，渲染完成之后获取数据，渲染之前获取数据
    1.渲染完成之后获取数据
    正常人都是这么干的，就是在组件的created钩子中写api获取数据，不做介绍了
    2.渲染之前获取数据
    这个还是很经典的，很有实际价值
    在接下来要切换的组件中的beforeRouteEnter中获取数据，数据获取完成之后再渲染，再添加一个渲染动画，感觉棒棒哒
    在next(vm => {
        // 将获取的数据放到实例上，上面介绍过了
    })
    上面这个也可以通过监听$route来实现，不过有点稍微延迟，不推荐使用
    watch: {
        $route(){
            ...
        }
    }
    

14. 滚动行为

    这个还是有点用的，切换到一个新的路由组件时，控制页面的位置
    借助scrollBehavior方法，这个方法要写在router实例中
    const router = new VueRouter({
        routes: [...],
        scrollBehavior (to,from,savedPosition) {
            savedPosition是点击浏览器的前进后退按钮才管用，下面列举了几种使用demo
            return {x: 0,y: 0}; 简单的回到最顶部
            return savedPosition; 返回原先的位置
            if (to.hash) {
                return {selector: to.hash} 锚点定位
            }
        }
    })
    

15. 懒加载

    将组件拆分，实现按需加载，有如下几种方式，以后添加组件的话都这样用
    1.把路由对应的组件拆分成异步组件
    const Foo = resolve => {
        require.ensure(['./Foo.vue'], () => {
            resolve(require('./Foo.vue'))
        })
    }
    2.AMD
    const Foo = resolve => require(['./Foo.vue'], resolve)
    3.将多个组件打包到一个模块中
    const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
    const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
    const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')