vue each_Vue.js从零开始——模块化项目（2）
今天更新晚了點，因為剛剛去參加面試回來；不多說廢話了，今天主要看的是路由，當然因為 Vue Router 本身已經可以寫很多內容了，所以我傾向于把基礎內容放在這里，路由單開一部分來詳細看看。
1 簡單路由
路由是什么呢？
在計算機領域，路由其實就是根據指定好的規則，將一類訪問導向至規則對應的地址的動作。
所以網絡設備當中有硬件的路由器（其實就是簡化版本的計算機，搭配路由軟件）；而 Vue.js 的路由，允許我們通過不同的 URL 訪問不同的內容，所以原理上是一致的。
如果我們只需要非常簡單的路由而不想引入一個功能完整的路由庫，可以像這樣動態渲染一個頁面級的組件：
const結合 HTML5 History API，就可以建立一個麻雀雖小但是五臟俱全的客戶端路由器。
官方提供了一個完整的例子：vue-simple-routing-example。
2 第三方路由
如果在接觸 Vue.js 之前已經使用習慣了某路由，也可以很容易的整合到 Vue 項目當中來，比如 Page.js 或者 Director 都是不錯的選擇，這里有個使用 Page.js 的范例：
main.js：
importroutes.js（簡單的路由）：
exportlayouts/main.vue（路由主體）：
<components/VLink.vue（鏈接組件）：
<pages/Home.vue（首頁）：
<pages/About.vue（關于頁面）：
<pages/404.vue（錯誤頁面）：
<上面這些內容共同組成了這個簡單的路由應用，效果如下：
3 官方路由
先來一段官方介紹：
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。
包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的、基于組件的路由配置
- 路由參數、查詢、通配符
- 基于 Vue.js 過渡系統的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
當然這個有點太官方，其實可以看成就是 Node.js 專門提供的一個路由組件，我們可以直接拿來用就好。
用 Vue.js + Vue Router 創建單頁應用，是非常簡單的，使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當要把 Vue Router 添加進來的時候，我們需要做的是，將組件（components）映射到路由（routes），然后告訴 Vue Router 在哪里渲染它們。
下面是官方提供的例子：
HTML:
<JavaScript：
// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)通過注入路由器，我們可以在任何組件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由：
// Home.vue該文檔通篇都常使用 router 實例，不過需要留意一下 this.$router 和 router 使用起來完全一樣，一般使用 this.$router 的原因是我們并不想在每個獨立需要封裝路由的組件中都導入路由。
這里有個比較完整的例子（使用 CDN 并未使用模塊化方式）：
<!DOCTYPE html>要注意，當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active，可以查看 API 文檔 學習更多相關內容。
總結
以上是生活随笔為你收集整理的vue each_Vue.js从零开始——模块化项目（2）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 被尘封的故事技能点bug_新月纪元稳定版
- 下一篇： 笔记本电脑有蓝牙连接功能吗_百元蓝牙无线