前端路由有什麼優點和缺點?
• 優點:使用者體驗好,不需要每次都從伺服器全部獲取,快速展現給使用者
• 缺點:不利於SEO;使用瀏覽器的前進,後退鍵的時候會重新發送請求,沒有合理地利用快取;單頁面無法記住之前滾 動的位置,無法在前進,後退的時候記住滾動的位置

這裡的路由並不是指我們平時所說的硬體路由器，這裡的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是我們WebApp的連結路徑管理系統

Vue-Router入門

安裝vue-router npm install vue-router --save-dev

這裡建議使用vue-cli腳手架 生成vue-router

vue init webpack vue-cli

在vue-router選項選擇yes 就可以了

###在src目錄下的router index.js檔案已經配置好了

引入元件HelloWorld的時候 這裡有個"@" 其實是webpack配置的路徑設定預設為src

此時我們進入vue-cli 執行 npm run dev 預設開啟http://localhost:8080就能看到HelloWorld中的內容了

簡單談一下router-view router-link

router-view用來顯示對應元件的內容，通過router-link傳遞資訊匹配相應的元件渲染router-view
有點類似於tab切換，可以理解為DOM元素的顯示隱藏

為什麼不用a標籤切換

因為我們用Vue作的都是單頁應用，就相當於只有一個主的index.html頁面，所以標籤是不起作用的，必須使用vue-router來進行管理。

路由中三個基本的概念 route, routes, router

1 . route，它是一條路由,Home按鈕 => home內容， 這是一條route, about按鈕 => about 內容， 這是另一條路由，儲存著當前路由頁面的資訊，實際開發多用$route用來獲取資訊

2 . routes 是一組路由，把上面的每一條路由組合起來，形成一個數組。實際開發用處不多

3 . router 是一個機制，相當於一個管理者，它來管理路由。居多是對路由路徑的操作

這邊簡單介紹一下meta元資訊

meta也是存在於物件中的一個屬性，此屬性作用不是很大，一般用來判斷當前是否切換到了路由，切換成功顯示元件內容的作用，亦或是在$route.meta讀取內容，可以設定值為陣列用來呼叫

接下來開始例項

在components中新建元件並存入路由中
這是HelloWorld中的內容

然後我們在url中修改一下路徑

回車之後顯示的內容如下

一旦我們在路由中設定好物件屬性，就可以在url中改變path顯示內容了

router-link

如何通過router-link繫結路由

router-link一定是在有router-view標籤的元件當中，通過to繫結路由中的path路徑，用來切換router-view中的內容，同時改變對應的url路徑

配置子路由（嵌入路由）

子路由的情況一般用在一個頁面有他的基礎模版，然後它下面的頁面都隸屬於這個模版，只是部分改變樣式

新建三個元件

編輯路由

此時已經可以使用url進入元件，使用router-link編輯一下router-view

router-view 一定是存在父路由中的 也就是Test中

vue-router傳遞引數（一）

利用router-link 中的to進行傳參 格式如下 注意to前面加冒號 資料繫結

     <router-link :to="{name:name,params:{key:value}}">XXXXX</router-link>

name代表路由中設定的name params代表傳遞的物件

    <router-link :to="{name:'Test1',params:{user:'username'}}">test1</router-link>
    <router-link to="/test/test2">test2</router-link>

在子路由中，父路由的name是無效的 只有children中的name才有效

{
  path:'/test',
  name:'Test',
  component:Test,
  children:[
    {path:'/',component:Test},          //此處path路徑 / 表示父路由下的根目錄 也就是/test 顯示Test
    {path:'test1',name:'Test1',component:Test1},     //子路由不需要加/  
    {path:'test2',component:Test2}
  ]
}

使用$route屬性進行接參

通過設定的引數即可顯示

vue-router傳遞引數（二）

利用url傳遞引數，也就是直接在路由path中設定引數

簡單說明一下

{
path:'/params/:newsId/:newsTitle',  //冒號後面的都是引數
 component:Params
}

還是利用$route接收引數

    <p>{{ $route.params.newsId}}</p>
    <p>{{ $route.params.newsTitle}}</p>

但是此時我們的router-link寫法要稍微改變一下

<router-link to="/params/520/vue">params</router-link>

此時傳遞內容稍微有點固化，可根據實際情況，個人喜好進行設定

這裡有個小技巧，設定一下傳遞的資料型別，比如我們想要數字禁止傳遞物件

path:'/params/:newsId(\\d+)/:newsTitle',

給引數後面設定一個正則即可，一般還是使用to傳參

單頁面多路由區域操作

更改了一下路由 當component屬性為多個時要加s

除了default引數是固定的其餘可以自定義

通過router-view進行編輯，routes中的根路由的父路由都是通過APP.VUE渲染的 注意一下 所以我們在APP.VUE中編輯 router-view

    <template>
      <div id="app">
        <router-link to='/'>HelloWorld</router-link>
        <router-link to='/test'>Test</router-link>
        <router-view/>
              <router-view name="lefts" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
            <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>
      </div>
    </template>

效果就不演示了 可以複製程式碼測試一下

vue-router 的重定向

開發中有時候我們雖然設定的路徑不一致，但是我們希望跳轉到同一個頁面，或者說是開啟同一個元件。這時候我們就用到了路由的重新定向redirect引數。

    export default new Router({
      routes: [                     
        {                           
          path: '/',               
          name: 'HelloWorld',       
          component:HelloWorld
        },{
          path:'/goback',
          redirect:'/'
        }
      ]
    })

在物件中設定redirect引數，配置為路徑，當url中輸入/goback路徑的時候 會自動轉入根路由

一般可以用來配置404呼叫 設定萬用字元* 路徑即可

{
   path:'*',
   redirect:'/404元件'
}

重定向的配置跟path是相同的 也就是說也可以配置url引數

   {
      path:'/goParams/:newsId/:newsTitle',
      redirect:'/params/:newsId/:newsTitle'
    }

alias別名的使用

    export default new Router({
      routes: [                     
        {                           
          path: '/',               
          name: 'HelloWorld',       
          component:HelloWorld
        },{
          path:'/test',
          component:Test,
          alias:'/tests'
        }
      ]
    })

其實就是雙向path，可以通過path路徑也可以通過alias路徑訪問路由，類似重定向

##redirect和alias的區別
redirect：仔細觀察URL，redirect是直接改變了url的值，把url變成了真實的path路徑。
alias：URL路徑沒有別改變，這種情況更友好，讓使用者知道自己訪問的路徑，只是改變了中的內容。

alias小坑

別名請不要用在path為’/’中,也就是根路由中，將不起作用

路由的過渡動畫

在開發中有一種需求叫高階、大氣、上檔次。可以在頁面切換時我們加入一些動畫效果，提升我們程式的動效設計。

格式如下，在router-view外套上transition標籤 name內容自定義

    <transition name="fade">
      <router-view ></router-view>
    </transition>

css過渡類名： 元件過渡過程中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，比如name=”fade”,會有如下四個CSS類名：

1、fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀後立刻刪除。
2、fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成後移除。
3、fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後立刻刪除。
4、fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成後被刪除。

以下css供測試 注意要有路由切換，做好路由設定先

    .fade-enter {
      opacity:0;
    }
    .fade-leave{
      opacity:1;
    }
    .fade-enter-active{
      transition:opacity .5s;
    }
    .fade-leave-active{
      opacity:0;
      transition:opacity .5s;
    }

transition還有mode標籤

    <transition name="fade" mode=" ">
      <router-view ></router-view>
    </transition>

過渡模式mode：
in-out:新元素先進入過渡，完成之後當前元素過渡離開。 (預設)
out-in:當前元素先進行過渡離開，離開完成後新元素過渡進入。

路由的mode設定

mode的兩個值
histroy:當你使用 history 模式時，URL 就像正常的 url
hash:預設’hash’值，但是hash看起來就像無意義的字元排列，不太好看也不符合我們一般的網址瀏覽習慣。

    export default new Router({
      mode:'history',
      routes: [                     
        {                           
          path: '/',               
          name: 'HelloWorld',       
          component:HelloWorld
        },{
          path:'/test',
          component:Test,
          alias:'/tests'
        }
      ]
    })

兩者的區別還有很多，可以自行百度一下