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>