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

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> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。