vue项目搭建以及全家桶的使用详细教程(小结)(4)

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
 },
 routes: [
  {
   path:'/',
   redirect:'/root'
  },
  {
   path: '/root',
   name: 'root',
   components: {
    Left:() => import('@/page/rootLeft.vue'),
    Middle: () =>import('@/page/rootMiddle.vue'),
    Right: ()=>import('@/page/rootRight.vue')
   }

  }

 ]
})

上面的代码中，我们应用到了几个知识点，首先是滚动行文，这里我们配置了当路由跳转的时候，默认是滚动到（0，0）位置，即页面开始位置，其次我们用到的redirect是一个路由重定向的配置，接下来，在路由"/root"下，配置了具名视图，加载对应组件到对应视图，我们引入组件的方式使用到了箭头函数，这样写的目的是为了实现路由的懒加载，这样构建，只有在路由被执行的时候，才有引入对应的组件，对于页面性能的优化有很大的帮助；这里还需要注意的是，我们在引入的这些组件中，其实默认都是打包到一个文件下的，这样就会导致一次性引入的文件过大，为此，我们可以利用webapck打包工具，我们在build>webpack.base.conf.js文件下，增加如下代码，用于配置输出文件的模块名称，[name]是文件的名称，[chunkhash]是打包文件的哈希值，加上这个是为了将其作为版本号，以解决浏览器缓存机制带来的问题：

然后在路由文件中引入组件的代码如下：

{
   path:"/test",
   name:"test",
   component: ()=>import(/*webpackChunkName:"test"*/'@/page/test.vue')
}

在引入组件的时候，加上/ webapckChunkName: "文件名" /，就这可以将对于的组件打包到指定名称的文件下，这样可以减少首次加载的文件的大小，对于一些没有联系的功能，比如不同页面，我们可以把对应的组件放在同一个文件，这样，既可以减少首次加载文件达大小，同时也可以将文件实现一个按需加载，提高页面性能；

通过控制台，我们可以查看当前加载的文件资源，当我们点击测试按钮的时候，页面发生的跳转，这时候，我们会发现，在Network下，会加一条新的资源加载信息，这一条就是我们的分块打包后请求的资源；

步骤六、全局过滤器filter和全局注册组件的引入