快捷導(dǎo)航

詳解vue2路由vue-router配置（懶加載）

更新時間：2017年04月08日 09:23:21 作者：前端大蜜桃

本篇文章主要介紹了詳解vue2路由vue-router配置（懶加載），實例分析了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 = [ 
 {   //當(dāng)首次進入頁面時，頁面沒有顯示任何組件；讓頁面一加載進來就默認(rèn)顯示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組件路徑根據(jù)自己的配置引入 
] 
//最后創(chuàng)建router 對路由進行管理，它是由構(gòu)造函數(shù) new vueRouter() 創(chuàng)建，接受routes 參數(shù)。 
 
 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引入路由配置導(dǎo)航：

<template> 
<router-link to="/first">跳轉(zhuǎn)第一個頁面</router-link> 
<router-link to="/second">跳轉(zhuǎn)第二個頁面</router-link> 
<div id="view"> 
  <router-view></router-view> 
  </div> 
 
</template> 
 
<script> 
export default { 
 name: 'app' 
} 
</script> 
<style> 
</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: