vue2路由vue-router配置的示例分析

小編給大家分享一下vue2路由vue-router配置的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專業(yè)提供大豐企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為大豐眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

vue路由配置以及按需加載模塊配置

1、首先在component文件目錄下寫倆組件：

First.vue:

 
 
 
 
 
 
 h2, h3 { 
 font-weight: normal; 
 } 
 
 ul { 
 list-style-type: none; 
 padding: 0; 
 } 
 
 li { 
 display: inline-block; 
 margin: 0 10px; 
 } 
 
 a { 
 color: #42b983; 
 } 

Second.vue:

 
 
 
 
 
 
 h2, h3 { 
 font-weight: normal; 
 } 
 
 ul { 
 list-style-type: none; 
 padding: 0; 
 } 
 
 li { 
 display: inline-block; 
 margin: 0 10px; 
 } 
 
 a { 
 color: #42b983; 
 } 

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)首次進(jìn)入頁面時，頁面沒有顯示任何組件；讓頁面一加載進(jìn)來就默認(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 對路由進(jìn)行管理，它是由構(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, // 注入到根實(shí)例中 
 render: h => h(App) 
})

4、App.vue引入路由配置導(dǎo)航：

以上是“vue2路由vue-router配置的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：vue2路由vue-router配置的示例分析
標(biāo)題鏈接：http://www.jiaotiyi.com/article/jhoojo.html