vue-router的使用简介

基础案例

    goto foo 

    

       

     

    

        真是地址

    

    

         

    

     

    import Vue from 'vue'

    import VueRouter from 'vue-router'

    const foo = {

        template: '
',

        beforeRouteEnter: (to, from, next) => {

            next（vm => {} )

            //不能获取this实例，所以通过回调传参

        },

        beforeRouteUpdate: (to, from, next) => {

            // 路由跳转的时候调用（组件复用），可以访问this

        },

        beforeRouteLeave: (to, from, next) => {

            ／/导航离开的时候调用，可以访问this

            next（false） //防止用户为保存离开

        },

    }

    routes = [

        {

            path: '/foo',

            name: 'foo',

            component: Foo,

            alias: 'boo', //定义别名

            children: [

                {path: '', component: anything}

                {path: 'child', component: child}

            ],

            beforeEnter: (to, from, next) => {

            }

        },

        {

            path: '/name',

            components: { //有s，并且是标明各个视图的匹配

                default: foo,

                one: bar

            }

        },

        {

            path: '/name',

            redirect: to => {

                return '/foo'

            }

        },

        {

            path: '/name',

            redirect: {name: foo} //可以是字符串或者对象或者函数

        },

        {path: '/foo/:id?bar', component: Foo}, //id有无都可

        {path: '/foo/:id(\\d+)', component: Foo}, //正则匹配数字的id

        {path: '/foo/*', component: 404} //匹配一切

    ]

    new VueRouter({

        mode: 'history', //模式有history/hash/abstract

        base: '/app/',

        routes,

    })

    new Vue({

        router

    }).$mount('#app')

说明：

1. 动态路径参数：动态路径参数：{{route.params.name}}

2. router.query, route.name，route.fullPath，$route.path

3. 匹配规则：匹配到多个路由时，先定义就先匹配到

4. 嵌套路由以／开头会被当作跟路径

5. 编程式导航

   router.push('foo') <===> ...

   router.push({path: 'foo'})

   router.push({name: 'foo', params: {id: 123}, query: {p: 2}})

   router.replace('foo') <===> ...

   router.go(1);

   router.go(-1);

进阶案例

    const router = new VueRouter({})

    router.beforeEach((to, from, next) => {

        next() //进入管道的下一个钩子

        next(false) //终端当前导航，重置到from

        next({path: '/foo'}) //中断导航，跳转到新导航

    })

    router.afterEach(route => {



    })

说明：

1. to：即将进入的路由对象

2. from: 离开的路由对象

3. next：resolve的方法，必须调用来结束钩子调用

4. 可以设置全局的钩子，或者组件内的钩子

5. 滚动行为，只在history模式下生效

   new VueRouter({

    mode: 'history' //模式有history/hash/abstract
   
    routes，
   
    scrollBehavior (to, from, savedPosition) {
   
        if(savedPosition) {
   
            return savedPosition //浏览器前进或后退的时候回到记忆位置
   
        } else {
   
            return {x: 0, y: 0} //返回顶部
   
            return {selector: to.hash} //返回锚点
   
            // to.matched.length 匹配的长度
   
        }   
   
    }
   

   })

总结router实例和方法

属性：

router.app

router.mode

router.currentRoute

方法：

router.beforeEach()

router.beforeResolve()

router.afterEach()

router.push()

router.replace()

router.go()

router.back()

fouter.forward()

router.getMatchedComponents()

router.resolve()

router.addRoutes()

router.onReady()

• 完整的路由解析规则
  导航被触发。
  在失活的组件里调用离开守卫。
  调用全局的 beforeEach 守卫。
  在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  在路由配置里调用 beforeEnter。
  解析异步路由组件。
  在被激活的组件里调用 beforeRouteEnter。
  调用全局的 beforeResolve 守卫 (2.5+)。
  导航被确认。
  调用全局的 afterEach 钩子。
  触发 DOM 更新。
  用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。