vue-router路由讲解

时间:2024-01-16 19:31:20

此文章用来系统讲解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')
  16. 该文章来自此链接https://www.cnblogs.com/ye-hcj/p/7147697.html