vue-router路由讲解

时间 2019-11-09

原文原文链接

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

安装vue

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

结构vue-router

先来简单的了解一下使用的结构，方便后面学习
<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")
很简单吧

动态路由匹配npm

说简单点，就是不一样的路由值，访问同一个组件
例如：
    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哈哈~

嵌套路由编程

嵌套路由很简单，就是匹配到某个路由值，渲染到一个组件，这个组件内部还有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}
             ]
            }
        ]
    })

编程式导航api

简而言之，就是，使用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)

命名路由浏览器

命名路由是用来给懒人用的，给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>
咦。。。，好像还要多输入几个字符，不对，这是装逼用的

命名视图app

这个玩意儿就是当匹配到一个路由值，同时渲染多个组件，很简单，看下面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 三个组件了

重定向和别名异步

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

HTML5 History模式函数

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

导航钩子学习

这个功能很强大，能够在进行导航的过程的各个时间点作处理，很吊的
有全局的，单个路由的，组件的
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) {
        // 顾名思义，不介绍了
    }
}

路由元信息

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

过渡动效

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

数据获取

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

滚动行为

这个仍是有点用的，切换到一个新的路由组件时，控制页面的位置
借助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} 锚点定位
        }
    }
})

懒加载

将组件拆分，实现按需加载，有以下几种方式，之后添加组件的话都这样用
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')