vue 路由vue Router

在Web開發中，路由是指根據URL分配到對應的處理程式。對於大多數單頁面應用，都推薦使用官方支援的vue-router。Vue-router通過管理URL，實現URL和元件的對應，以及通過URL進行元件之間的切換。本文將詳細介紹Vue路由vue-router

vue Router

vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點選一個按鈕需要跳轉到對應的頁面，這就是路由跳轉；

首先我們來學習三個單詞（route，routes，router）：

• route：首先它是個單數，譯為路由，即我們可以理解為單個路由或者某一個路由；

• routes：它是個複數，表示多個的集合才能為複數；即我們可以理解為多個路由的集合，JS中表示多種不同狀態的集合的形式只有陣列和物件兩種，事實上官方定義routes是一個陣列；所以我們記住了，routes表示多個陣列的集合；

• router：譯為路由器，上面都是路由，這個是路由器，我們可以理解為一個容器包含上述兩個或者說它是一個管理者，負責管理上述兩個；舉個常見的場景的例子：當使用者在頁面上點選按鈕的時候，這個時候router就會去routes中去查詢route，就是說路由器會去路由集合中找對應的路由；

安裝
　　在使用vue-router之前，首先需要安裝該外掛

npm install vue-router

如果在一個模組化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全域性的 script 標籤，則無須如此

使用
　　用Vue.js + vue-router建立單頁應用非常簡單。使用Vue.js ，已經可以通過組合元件來組成應用程式，把vue-router新增進來，需要做的是，將元件(components)對映到路由(routes)，然後告訴 vue-router 在哪裡渲染它們

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 元件來導航，通過傳入 `to` 屬性指定連結，<router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口，路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>

	// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)
	
	// 1. 定義（路由）元件，可以從其他檔案 import 進來
	const Foo = { template: '<div>foo</div>' }
	const Bar = { template: '<div>bar</div>' }
	
	// 2. 定義路由
	// 每個路由應該對映一個元件。 其中"component" 可以是通過 Vue.extend() 建立的元件構造器，或者，只是一個元件配置物件。
	const routes = [
	  { path: '/foo', component: Foo },
	  { path: '/bar', component: Bar }
	]

// 3. 建立 router 例項，然後傳 `routes` 配置，當然還可以傳別的配置引數
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

// 4. 建立和掛載根例項。
// 通過 router 配置引數注入路由，從而讓整個應用都有路由功能
const app = new Vue({
　　el:'#app',
　　router
})
</script>  

一個頁面多個路由

有時候想同時 (同級) 展示多個檢視，而不是巢狀展示，例如建立一個佈局，有 sidebar (側導航) 和 main (主內容) 兩個檢視，這個時候命名檢視就派上用場了。你可以在介面中擁有多個單獨命名的檢視，而不是隻有一個單獨的出口。如果 router-view 沒有設定名字，那麼預設為 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一個檢視使用一個元件渲染，因此對於同個路由，多個檢視就需要多個元件。確保正確使用 components 配置 (帶上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})