详解vue2路由vue-router配置（懒加载）

<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> 

<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> 

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; 

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) })

<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>