在使用vue編寫單頁應用時，通過點選不同的連線想要區域性刷新出不同頁面的內容，通過vue-router會非常方便。

       然而在vue2和vue1中，路由的使用有著非常多不同的地方，當我們用npm搭建的是vue2版本的腳手架時，vue-router2.0以後的版本是不再相容之前的寫法的，這個我也踩了很多坑，各種百度和看文件，然後把原本Vue Router1版本的寫法改了過來。這裡來對比一下前後寫法的不同：

在一切開始之前，首先要使用npm install vue-router --save 安裝vue的路由依賴，接下來才算是正式開始：

1.標籤部分：

vue1中是通過給<a>

  <div id="app">
    <div class="tab">
      <div class="tab-item"><a v-link="{path:'/home'}">主頁</a></div>
      <div class="tab-item"><a v-link="{path:'/detail'}">詳情</a></div>
      <div class="tab-item"><a v-link="{path:'/about'}">關於</a></div>
    </div>
    <router-view></router-view>
  </div>
 

      在vue2中，將原本的<a v-link="">替換成了新的自定義標籤<router-link>，通過to屬性，指定路徑：

<div id="app">
    <div class="tab border-1px">
      <div class="tab-item"><router-link to="/home">主頁</router-link></div>
      <div class="tab-item"><router-link to="/detail">詳情</router-link></div>
      <div class="tab-item"><router-link to="/about">關於</router-link></div>
    </div>
    <router-view></router-view>
  </div>
 

接下里是關於入口檔案main.js中的程式碼編寫：

      首先做一些必要的引入，這個在vue1和vue2中都是一樣的：

import Vue from 'vue';   // 引入node_modules中的vue
import App from './App'; // 引入當前目錄下的App.vue  字尾省略
import VueRouter from 'vue-router'; // 引入vue路由元件
import VueSource from 'vue-resource'; // 引入元件，vue-source 有類似ajax的資料互動功能
import goods from './components/home/home.vue'; // 引用元件，為了在配置路由時使用
import ratings from './components/detail/detail.vue';
import seller from './components/about/about.vue';

Vue.use(VueRouter); // 使用引入的路由元件

router.map({
    '/home': { component: home },
    '/detail': { component: detail }，
    '/about': { component: about}
})

var App = Vue.extend({});
router.start(App, '#app');

router.go('/home');//讓專案啟動時預設顯示home的內容

const routes = [
  {path: '/home', component: home},
  {path: '/detail', component: detail},
  {path: '/about', component: about},
  {path: '/', component: home}   //這裡是為了讓輸入錯誤路徑和空路徑時預設顯示home的內容
];
let router = new VueRouter({    
  routes,                           // routes:routes  傳入路由引數
  linkActiveClass: 'active'    // 這個屬性是設定當前被點選的a標籤class名，為了方便設定選中項的樣式
}); // 宣告一個路由物件

/* eslint-disable no-new */
// new 一個vue的例項
let vue = new Vue({
  el: '#app', // 掛載點，掛載在id為app的元件上
  template: '<App/>',
  router,        //把宣告的router物件作為引數傳給vue物件
  components: { App } // 組冊元件，這裡是一個es6的縮寫方法，相當於components:{App:App}
});
vue.$mount('#app'); // 把vue掛載到dom上
router.push('/goods');// 代替原本的router.go()，讓頁面初始預設跳轉到/goods

vue1到vue2的遷移似乎真的是大工程，需要修改的地方還是非常多的，日後會邊學習，邊補充~