vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/common.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '',
 components: { App }
})

router文件夾里面的index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home'    //這里可以選擇2種寫法，一種是寫在這里，一種是寫在component里面，看下方代碼~

Vue.use(Router)

export default new Router({
     mode:'history',
     routes: [
       {
         path: '/',
         component: home
       },
       {
           path:'/pagevue',
           component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
       },
       {
           path:'/nextpagevue',
           component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
       }
   ]
})

home.vue

  
    
    
     我是首頁
     
    
     "clickMe">點我進下一個路由
     
    
  

pagevue.vue

  
    
    
     我是子頁面
     
    
     "returnhome">點我繼續(xù)進下一個路由
     
    
  

nextpagevue.vue

  
    
    
     我是另外一個子頁面
     
    
     "clickGohome">點我回到首頁
     
    
  

common.css

* {
 margin: 0;
 padding: 0; }
.homeMain {
 text-align: center;
 margin-top: 100px; }
 .homeMain .routerName {
   color: #1eb89c;
   border: 1px solid #1eb89c;
   margin-top: 20px; }

/*# sourceMappingURL=common.css.map */

名稱欄目：詳解vue-router使用實例
文章起源：http://uogjgqi.cn/article/dpgjicc.html