浅谈Vue-router的部分高级用法

前言

        你们很久不见，上周没来得及写文章，这周终于有时间发布文章了，仍是很开心的，至于这篇文章的内容你们就能够看出来不会有不少，而且针对的是已经有初步了解Vue-router的人，好了进入正题。

正题

        今天要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法

        1.路由元信息

        什么是路由元信息，看看官网的解释，定义路由的时候能够配置 meta 字段能够匹配meta字段，那么咱们该如何使用它，一个简单的例子，改变浏览器title的值。下面上代码。

//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
    mode: 'history',
    routes: [
        {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
        {path: 'login', name: 'Login', component: Login,meta:{title:"登陆"}}
    ]
})
//能够在跳转以前判断跳转的组件的名字并用window.document.title赋值
Router.beforeEach((to,from,next) => {
    window.document.title=to.meta.title
})
复制代码

        上面的是否是看上去很简单呢，可是它并不简单，我只是举了一个比较小的例子罢了。还要看你们怎么活学活用这样才好，可是我强调几点须要注意的

        第一点就是这个beforeEach页面跳转以前调用，好处是好比想要改变title的值不会显得太突兀，能够直接替换。

        第二点afterEach这个不用我说了吧这个是在组件跳转以后调用比较适用于返回页面以前浏览过的区域或者是让页面返回顶部的操做。

        2.滚动行为

        想必各位同窗应该知道我要讲些什么了没错就是页面的前进和后退时的滚动事件，怎么实现呢，有两种实现方式，先看代码。

//刚才我说过的方法直接使用afterEach方法去实现组件的scrollTo归零
Router.afterEach((to,from,next) => {
    window.scrollTo(0,0)
})
复制代码

        下面是真正的回滚事件能够看看

//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
    mode: 'history',
    routes: [
        {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
        {path: 'login', name: 'Login', component: Login,meta:{title:"登陆"}}
    ]，
    //有两种小的方式进行回滚
    //{ x: number, y: number }
    //{ selector: string, offset? : { x: number, y: number }}
    //第二种方式仅适用于(offset 只在 2.6.0+ 支持)
    scrollBehavior (to, from, savedPosition) {
    console.log(savedPosition)
    return { x: 0, y: 0 }
    }
})
复制代码

        上面咱们介绍了scrollBehavior的回滚方法或者说是scrollBehavior的滚动行为，可是想必你们可能对这种方法还有些不太理解，下面咱们看看官网是怎么讲解的，使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像从新加载页面那样。 vue-router 能作到，并且更好，它让你能够自定义路由切换时页面如何滚动。没错这个方法就是scrollBehavior滚动行为。另外须要注意: 这个功能只在支持 history.pushState 的浏览器中可用。更多的使用方法能够去官网去看看。

        3.路由懒加载

        或许不该该叫路由懒加载应该叫按需加载我觉着是更合适的。不解释之后用多了大家就会理解。下面上代码。

//代码很简单看看就知道了，下面只贴部分代码
{path:'homepages',name:'Homepages',component:homepages,resolve}
复制代码

        没错只要使用resolve就能实现按需加载的要求，是否是很简单，可是resolve还有不少其余使用方式建议去官网看看。另外诸如go(),history等方法的使用仍是去官网上看看本身写出来理解会更快。

后记

        最终的最终仍是但愿你们多看看理解了再去使用到项目中，不至于使用以后出现细小的bug之类的就很差了，一样的仍是感谢你们观赏个人文章，谢谢。