vue2路由view-router配置（懒加载）

vue2路由view-router配置（懒加载）：vue路由配置以及按需加载模块配置。

1、首先在component文件目录下写俩组件：

First.vue :

<script>
  export default {
    name: 'first',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

Second.vue :

<script>
  export default {
    name: 'second',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

2、router目录下的index.js文件配置路由信息：

import Vue from 'vue'
import VueRouter from 'vue-router'
/*import First from '@/components/First'
import Second from '@/components/Second'*/

Vue.use(VueRouter)

/*const routes = [
  //重定向
  {
    path:'/',
    redirect:'first'
  },
  {
    path: '/first',
    name: 'First',
    component: First
  },
  {
    path: '/second',
    name: 'Second',
    component: Second
  }
]*/

//懒加载路由
const routes = [
  {          //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面
    path:'/',   //重定向，就是给它重新指定一个方向，加载一个组件；
    component:resolve => require(['@/components/First'],resolve)
  },
  {
    path:'/first',
    component:resolve => require(['@/components/First'],resolve)
  },
  {
    path:'/second',
    component: resolve => require(['@/components/Second'],resolve)
  }
//这里require组件路径根据自己的配置引入
]
//最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。

 const router = new VueRouter({
 routes
})

export default router;

3、main.js中引入路由配置文件：

import $ from 'jquery'
import Vue from 'vue'
import App from './App'
import router from './router'   //引入路由配置文件
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'






Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,   // 注入到根实例中
  render: h => h(App)
})

4、App.vue引入路由配置导航：

<script>
export default {
  name: 'app'
}
</script>