帶你入坑02-weex-路由的使用

本節(jié)內(nèi)容

學(xué)會使用路由進(jìn)行組件切換


接上上節(jié)的內(nèi)容進(jìn)行講解路由的使用

  • 第一步

創(chuàng)建一個父組件和兩個子組件
父組件foo.vue 的文件和子組件home.vue和me.vue

  • 第二步 定義路由router.js 文件
  // 定義路由 
  //第一步 導(dǎo)入路由模塊vue-router 和vue.js
  import VueRouter from 'vue-router'
  import Vue from 'vue'
  // 第二步 導(dǎo)入組件
  import home  from './home.vue'
  import me  from './me.vue'
  // 第三步 讓Vue 使用  vue-router 當(dāng)做自己的路由
  Vue.use(VueRouter)
  // 第四步 創(chuàng)建路由對象
  export default new VueRouter({
  // mode: 'abstract', // weex 中只能使用    abstract 類型 默認(rèn)可以不寫 系統(tǒng)會自動設(shè)置為abstract
  // 定義路由
  routes: [
    { path: '/home', component: home},
    { path: '/me', component: me}
  //  { path: '/article/:url(.*)?', component:       ArticleView },
  //  { path: '/item/:id(\\d+)', component: CommentView },
  //  { path: '/user/:id', component: UserView },
  //  { path: '/', redirect: '/home' }
   ]
  })

第三步 在入口的app.js文件中 創(chuàng)建根節(jié)點(diǎn)組件

// 第一步 導(dǎo)入根組件
import foo from './src/foo.vue'
// 第二步 導(dǎo)入路由文件
import router from './src/Router.js'
//第三步  給根組件一個id
foo.el = '#root'
//第四步給 給根組件設(shè)置路由
foo.router = router
// 第五步 創(chuàng)建Vue 對象
export default new Vue(foo);
// 第六步 指定一個路由入口
router.push('me')

第四步 我們看看我們的根組件的代碼

<template>
  <div class="wrapper">
<div class="nav">
   <text @click="jump('home')" :class="selectedPath=='home'?'nav-item-selected':'nav-item-normal'">主頁{{selectedTitleColor}}</text>
   <text @click="jump('me')" :class="selectedPath=='me'?'nav-item-selected':'nav-item-normal'">我的</text>
</div>
<!-- 定義路由模板視圖 這個是用來加載組件的-->
<router-view class="template"></router-view>
  </div>
    </template>

<style>
  .wrapper { align-items: center; margin-top: 40px; }
  .nav{
        display: flex;
        flex-direction: row;
      justify-content: space-around;
        width:750px;
        height: 88px;
  }
  .template{ 
     position:absolute;
     top: 128px;
     bottom: 0px;
     left: 0px;
     right: 0px;
    }
  .nav-item-selected{
color:yellowgreen;
  }
  .nav-item-normal{
        color:black;
  }
</style>
<script>
  export default {
data:{
  selectedPath:'me'
},
methods: {
      // 單擊按鈕跳轉(zhuǎn)到指定的路徑
  jump: function (e) {
        this.$router.push(e);
        this.selectedPath = e;
  }
}
}
</script>

第五步 home.vue 和me.vue 中的代碼

home.vue

<template>
    <div class="home-container">
        <text>主頁</text>
    </div>
</template>
<script>
    export default{
    }
</script>
<style>
.home-container{
  background-color:red;
  width:750px;
  font-size: 30px;
  text-align: center;
}
</style>

me.vue

<template>
<div class="me-container">
    <text>我的</text>
</div>
</template>
<script>
export default{
}
</script>
 <style>
 .container{
    background-color: green;
    width:750px;
    font-size: 30px;
 }
</style>
210ADF6F-3350-475E-BE90-200CD377829A.png
A6844CE7-BB6F-43F4-862E-EAFE71797D18.png

路由的作用是在單頁面內(nèi),進(jìn)行組件的切換!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末岔帽,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子银亲,更是在濱河造成了極大的恐慌沾谜,老刑警劉巖志于,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡吻商,警方通過查閱死者的電腦和手機(jī)利职,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門趣效,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人猪贪,你說我怎么就攤上這事跷敬。” “怎么了热押?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵西傀,是天一觀的道長。 經(jīng)常有香客問我桶癣,道長拥褂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任鬼廓,我火速辦了婚禮肿仑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘碎税。我一直安慰自己尤慰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布雷蹂。 她就那樣靜靜地躺著伟端,像睡著了一般。 火紅的嫁衣襯著肌膚如雪匪煌。 梳的紋絲不亂的頭發(fā)上责蝠,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天,我揣著相機(jī)與錄音萎庭,去河邊找鬼霜医。 笑死,一個胖子當(dāng)著我的面吹牛驳规,可吹牛的內(nèi)容都是我干的肴敛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼医男!你這毒婦竟也來了砸狞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤镀梭,失蹤者是張志新(化名)和其女友劉穎刀森,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體报账,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡研底,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了笙什。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片飘哨。...
    茶點(diǎn)故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖琐凭,靈堂內(nèi)的尸體忽然破棺而出芽隆,到底是詐尸還是另有隱情,我是刑警寧澤统屈,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布胚吁,位于F島的核電站,受9級特大地震影響愁憔,放射性物質(zhì)發(fā)生泄漏腕扶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一吨掌、第九天 我趴在偏房一處隱蔽的房頂上張望半抱。 院中可真熱鬧,春花似錦膜宋、人聲如沸窿侈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽史简。三九已至,卻和暖如春肛著,著一層夾襖步出監(jiān)牢的瞬間圆兵,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工枢贿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留殉农,地道東北人。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓局荚,卻偏偏與公主長得像统抬,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,284評論 25 707
  • “若莫聪建,有人找∶B剑”在辦公室門外正在和男朋友通電話的南歌朝辦公室大聲喊道金麸。若莫會心一笑,快速收拾好東西跑出了辦公室簿盅,...
    那只毛蟲閱讀 243評論 2 2
  • 我是有點(diǎn)喜歡看小說的挥下,尤其是離開學(xué)校,不用再受迫去應(yīng)付學(xué)習(xí)之后桨醋,閑暇之余所看的書幾乎也只有小說了棚瘟。而且此前只愛看長...
    濁濁玉閱讀 387評論 0 0
  • (一) 米米第一次和男朋友單獨(dú)旅行是在高三結(jié)束后的暑假偎蘸。廈門。 第一次出遠(yuǎn)門米米顯然有些興奮瞬内,充滿了新鮮感迷雪,相應(yīng)的...
    Shadowarea閱讀 242評論 0 1
  • 前幾天在開發(fā)某些數(shù)據(jù)結(jié)構(gòu)到文件的 Dump 和 Load 功能的時候, 遇到的一個 bug 虫蝶。 問題復(fù)現(xiàn)### 問...
    babybus_hentai閱讀 834評論 0 1