Weex入門教程之10,vue-router 路由
介紹
用 Vue.js + vue-router 建立單頁應用,是非常簡單的。使用 Vue.js 時,我們就已經把元件組合成一個應用了,當你要把 vue-router 加進來,只需要配置元件和路由對映,然後告訴 vue-router 在哪裡渲染它們。
Vue in Weex
Vue.js 是 Evan You 開發的漸進式 JavaScript 框架,在易用性、靈活性和效能等方面都非常優秀。開發者能夠通過撰寫 *.vue 檔案,基於 <template>, <style>, <script> 快速構建元件化的 web 應用。
Vue.js 在 2016 年 10 月正式釋出了 2.0 版本,該版本加入了 Virtual-DOM 和預編譯器的設計,使得該框架在執行時能夠脫離 HTML 和 CSS 解析,只依賴 JavaScript;同時 Virtual-DOM 也使得 Vue 2.x 渲染成原生 UI 成為了可能。
目前 Weex 與 Vue 正在展開官方合作,並將 Vue 2.x 作為內建的前端框架,Vue 也因此具備了開發原生應用的能力。
Vue.js簡單使用:
<template>
<div class="wrapper">
<text class="weex">Hello Weex !</text>
<text class="vue">Hello Vue !</text>
</div>
</template>
<style scoped>
.wrapper {
flex-direction: column;
justify-content: center;
}
.weex {
font-size: 60px;
text-align: center;
color: #1B90F7;
}
.vue {
font-size: 60px;
text-align: center;
margin-top: 30px;
color: #41B883;
}
</style>
Vue.js 也有較多周邊技術產品,如 Vuex 和 vue-router 等,這些庫也可以在 Weex 中很好的工作。
接下來,只介紹vue-router,Vuex不作相關介紹,詳情請訪問官網文件。
vue-router 是專為 Vue.js 開發的便於實現單頁應用的工具庫,能夠以宣告式的方法編寫頁面的導航和跳轉資訊。
說白了,就是路由功能。
安裝
由於我們是原生和weex混合使用,所以我們就直接下載vue、vue-router的js檔案並引用即可。
直接下載
vue-router
vue
推薦:unpkg, 會保持和 npm 釋出的最新的版本一致。可以在unpkg.com/vue/ 瀏覽 npm 包資源。
注: 開發環境不要用最小壓縮版,不然就失去了錯誤提示和警告!
使用
在 Vue 後面載入 vue-router,它會自動安裝的:
<script src="./plug-in/vue/vue.js"></script>
<script src="./plug-in/vue/vue-router.js"></script>
或
<script>
import vue from './plug-in/vue/vue.js'
import router from './plug-in/vue/vue-router.js'
...
</script>
程式碼示例
待續…
相關推薦
Weex入門教程之10,vue-router 路由
介紹 用 Vue.js + vue-router 建立單頁應用,是非常簡單的。使用 Vue.js 時,我們就已經把元件組合成一個應用了,當你要把 vue-router 加進來,只需要配置元件和路由對映,然後告訴 vue-router 在哪裡渲染它們。
Weex入門教程之5,debug除錯,整合 Devtools 到 Android
整合 Devtools 到 Android Weex Devtools 能夠方便除錯 Weex 頁面,但此功能離不開 Native 的支援。如何讓你的 App 也整合 Devtools,在本章將會詳細說明 Android 端如何接入 Weex Devt
爬蟲入門教程之requests,BeautifulSoup庫的介紹以及問題解釋
HTTP協議 HTTP,超文字傳輸協議(HTTP,HyperText Transfer Protocol)是網際網路上應用最為廣泛的一種網路協議。所有的WWW檔案都必須遵守這個標準。設計HTTP最初的目的是為了提供一種釋出和接收HTML頁面的方法,HTTP是一種基於"請求與響應
Packet Tracer 思科模擬器入門教程 之十四 路由器綜合路由配置
實驗目標 掌握綜合路由器的配置方法; 掌握檢視通過路由重分佈學習產生的路由; &
Packet Tracer 思科模擬器入門教程 之十三 路由器OSPF動態路由配置
實驗目的 掌握OSPF協議的配置方法: 掌握檢視通過動態路由協議OSPF學習產生的路由; 熟悉廣域網線纜的連結方式; 實驗背景 假設校園網通過一臺三層交換機連到校園網出口路由器上,路由器再和校
Packet Tracer 思科模擬器入門教程 之十一 路由器靜態路由配置
實驗目標 掌握靜態路由的配置方法和技巧; 掌握通過靜態路由方式實現網路的連通性; 熟悉廣域網線纜的連結方式; 實驗背景 學校有新舊兩個校區,每個校區是一個獨立的區域網,為了使新舊校區能夠正常相互通訊,共享資源。每個校
Packet Tracer 思科模擬器入門教程 之十 路由器單臂路由配置
實驗目標 掌握單臂路由器配置方法; 通過單臂路由器實現不同VLAN之間互相通訊;
【OpenCV入門教程之三】 影象的載入,顯示和輸出 一站式完全解析
毛星雲,網路ID「淺墨」,90後,熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術,就職於騰訊互娛。 微軟最有價值專家 著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》 碩士就讀於南京航空航天大學航天學院(2013級碩士研究生),已於2016年三月畢業。本科
vue成長之路+實戰+Vue2+VueRouter2+webpack(一)vue-router路由入門
前言 通過前面我寫的VUE入門部落格,相信已經大概瞭解VUE是何物,但是對於細節性的問題我們還是有些忽略,有很多網友希望我能繼續寫相關部落格,但是由於工作繁忙原因一直無空去寫,終於得空於是協知識歸來。 2017年一定是VUE火熱的一年,引得無數人飛蛾
vue,vue-router實現瀏覽器返回不刷新頁面
刷新 -i ext 配置 ali reload) json 直接 length 當我們在寫單頁應用的時候,前端路由采用vue-router實現,如果從頁面A跳到頁面B,然後點瀏覽器返回,返回到頁面A時,頁面會刷新。最近遇到一個需求,一個列表頁,用戶會根據條件進行篩選,也可以
nodejs入門教程之http的get和request簡介及應用
adding orm col luci string odi func cor mar nodejs入門教程之http的get和request簡介及應用 前言 上一篇文章,我介紹了nodejs的幾個常用的模塊及簡單的案例,今天我們再來重點看一下nodejs的http
MongoDB最簡單的入門教程之五-通過Restful API訪問MongoDB
rest creat 操作 database internal 進行 作用 shu 公眾 通過前面四篇的學習,我們已經在本地安裝了一個MongoDB數據庫,並且通過一個簡單的Spring boot應用的單元測試,插入了幾條記錄到MongoDB中,並通過MongoDB Com
hadoop入門教程之DKH安裝環境準備
hadoop入門教程之DKH安裝環境準備 前幾天去參加了一個線下的聚會,參加聚會的基本都是從事網際網路工作的。會上有人提到了區塊鏈,從而引發了一場關於大資料方面的探討。我也是從去年才正式接觸大資料,一直在學習hadoop。相信接觸過hadoop的人都知道,。單獨搭建hadoop裡每個組建都需
【OpenCV入門教程之八】線性鄰域濾波專場:方框濾波、均值濾波與高斯濾波
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
python+scrapy入門教程之爬取騰訊招聘職位資訊
我是用的IDE是pycharm,要想使用scrapy我們先安裝模組file-settings-project Interpreter 安裝完成之後我們開啟Terminal 在終端輸入:scrapy startproject tencent 建立spiders我們需要進入spi
Tensorflow入門教程之手寫數字MINST識別
Tensorflow入門教程之手寫數字MINST識別 MNIST是在機器學習領域中的一個經典問題。該問題解決的是把28x28畫素的灰度手寫數字圖片識別為相應的數字,其中數字的範圍從0到9. MNIST 資料下載 Yann LeCun's MNIST page也提供了訓練集與測試集資料
Phalcon 入門教程之安裝
Phalcon安裝 # 下載安裝包 wget https://github.com/phalcon/cphalcon/archive/v3.0.1.tar.gz # 重新命名 mv v3.0.1.tar.gz cphalcon-3.0.1.tar.gz
vue Router 路由守衛之beforeEach
你可以使用 router.beforeEach 註冊一個全域性前置守衛: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
MongoDB最簡單的入門教程之四:使用Spring Boot操作MongoDB
Spring Boot 是一個輕量級框架,可以完成基於 Spring 的應用程式的大部分配置工作。Spring Boot的目的是提供一組工具,以便快速構建容易配置的Spring應用程式,省去大量傳統Spring專案的繁瑣配置。 MongoDB是一個基於分散式檔
SpringCloud入門教程之系統框架的演變(一)
小仙女又來啦,最近我在學習SpringCloud的入門,但是它的框架演變又是怎樣的呢?今天小仙女會一一的為大家解疑答惑滴!!! 好了,開始進入正題啦~~ 系統框架演變 1.簡介 1.1.集中式架構/單體應用 1.2.垂直拆分 1.3