vue 懒加载

vue路由配置以及按需加载模块配置

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

First.vue  :

<template>
  <div>我是第一个页面</div>
</template>
 
<script>
  export default {
    name: 'first',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
 
  ul {
    list-style-type: none;
    padding: 0;
  }
 
  li {
    display: inline-block;
    margin: 0 10px;
  }
 
  a {
    color: #42b983;
  }
</style>


Second.vue    :


<template>
  <div>我是第二个页面</div>
</template>
 
<script>
  export default {
    name: 'second',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
 
  ul {
    list-style-type: none;
    padding: 0;
  }
 
  li {
    display: inline-block;
    margin: 0 10px;
  }
 
  a {
    color: #42b983;
  }
</style>

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引入路由配置导航：

<template>
<router-link to="/first">跳转第一个页面</router-link>
<router-link to="/second">跳转第二个页面</router-link>
<div id="view">
        <router-view></router-view>
      </div>
 
</template>
 
<script>
export default {
  name: 'app'
}
</script>
<style>
</style>