扣丁学堂HTML5开发培训带你深入理解Vuerouter部分高级用法

2018-09-11 14:16:36 373浏览

今天扣丁学堂HTML5培训给大家介绍一下关于Vuerouter部分高级用法的详解，首先要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法，下面我们一起来看一下吧。

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}

以上就是关于扣丁学堂HTML5培训带你深入理解Vuerouter部分高级用法的详细介绍，希望对大家有所帮助。想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂，扣丁学堂有专业老师制定的HTML5学习路线图和HTML5视频教程供学员观看学习，想要学好HTML5开发技术的小伙伴快快行动吧。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>