vue-router配合vue-cli的實例

前面在說到vue-router的時候，都是用最簡單的方式說明用法的，可是在實際項目中可能會有所出入，因此，今天就結合vue腳手架來展現項目中的vue-router的用法。

建立項目

首先須要使用腳手架建立一個項目，這裏選擇的是webpack-simple這個模板。

1，執行命令：vue init webpack-simple cli-router就能夠

2，npm install 下載相關依賴

3，npm run dev運行項目。

此時咱們能夠看到瀏覽器中自動新開的頁面：

新建組件

和前面例子同樣，咱們須要新建兩個組件用於路由跳轉，按照習慣，這裏在src文件夾下面新建一個用於存放組件的文件夾components，在這個文件夾下面新建兩個個組件Home.vue和News.vue，並添加基本信息。

  

安裝並配置路由

在之前是直接引入js包的，如今則是經過npm來下載，只須要在項目的根目錄執行命令：npm  install  vue-router --save便可。

下載完畢後，須要進行路由配置，在實際項目中，路由會比較多，全部一般的作法是將路由配置單獨提出來，因此這裏先在src文件夾下面新建一個文router.config.js進行路由配置：

這裏是將配置的路由放置在一個數組裏面，而後須要在入口文件main.js中引入這個數組。在引入前，先須要引入上面下載的路由，

頁面渲染

在完成前面的步驟後，咱們須要將匹配的路由進行渲染，在App.vue頁面中，先將以前默認生成的內容刪掉，而後再使用<router-link>標籤，和前面的用法基本同樣。

 

完成後，從新運行項目。

 

 使用動畫

 前面在過渡中使用過一個角animate.css的動畫庫，其實，在路由中也可使用，使用前須要先將資源引入進來，

 首先在src文件夾下面的assets這個文件夾下面新建一個文件css文件，而後將前面下載的animate.css放在css文件夾下面。

而後在main.js中引入這個樣式文件

有的版本中直接這樣引入外部樣式的時候會報下面的這樣的錯誤

這是由於項目中缺乏css-loader和style-loader，因此須要在項目跟目錄中執行命令 npm intsall css-loader style-loader --save-dev來下載相關依賴，而後在webpack.config.js中進行配置。

若是上面的不報錯，再繼續在須要使用動畫的位置進行添加動畫組件和動畫樣式就能夠了。

此時就實現了最基本的路由配合腳手架和動畫的項目了。

完整代碼下載：點這裏