6 VUE路由

vue-> SPA應(yīng)用寓落,單頁(yè)面應(yīng)用(引入vue-router.js)

vue-resouce 交互
vue-router  路由
根據(jù)不同url地址,出現(xiàn)不同效果
html:
        <a v-link="{path:'/home'}">主頁(yè)</a>  跳轉(zhuǎn)鏈接
        <a v-link="{path:'/news'}">新聞</a>
        <router-view><router-view>展示的內(nèi)容
js :
//1. 準(zhǔn)備一個(gè)根組件    必須是跟組件
var App=Vue.extend();
//2. Home News組件都準(zhǔn)備
var Home=Vue.extend({
    template:'<h3>我是主頁(yè)</h3>'
});
var News=Vue.extend({
    template:'<h3>我是新聞</h3>'
});
//3. 準(zhǔn)備路由
var router=new VueRouter();
//4. 關(guān)聯(lián)
router.map({
    'home':{
        component:Home
    },
    'news':{
        component:News
    }
});
//5. 啟動(dòng)路由
router.start(App,'#box');
//6. 跳轉(zhuǎn)  
router.redirect({
    '/':'/news',// 訪問(wèn)跟目錄條轉(zhuǎn)  那個(gè)
    '/aaa':'/home',//訪問(wèn)aaa的時(shí)候跳轉(zhuǎn)home
});

路由嵌套(多層路由):

層級(jí)關(guān)系
主頁(yè)  home
    登錄  home/login
    注冊(cè)  home/reg
新聞頁(yè) news
subRoutes:{//在Home關(guān)聯(lián)里面寫    subRoutes表示子路由的意思
    'login':{
        component:{
            template:'<strong>我是登錄信息</strong>'
        }
    },
    'reg':{
        component:{
            template:'<strong>我是注冊(cè)信息</strong>'
        }
    }
}

路由其他信息:

//這樣的路徑  有時(shí)候不知道跳那個(gè)   是從后臺(tái)傳過(guò)來(lái)的
<a v-link="{path:'/news/detail/001'}">新聞001</a>
<a v-link="{path:'/news/detail/002'}">新聞002</a>
'news':{
    component:News,
    subRoutes:{
        '/detail/:id':{
            component:Detail
        }
    }
}
var Detail=Vue.extend({
    template:'#detail'
});
<template id="detail">
    {{$route.params | json}}   //獲取數(shù)據(jù)
</template>
/detail/:id/age/:age  多值傳送
{{$route.params | json}}    ->  當(dāng)前參數(shù)
{{$route.path}} ->  當(dāng)前路徑
{{$route.query | json}} ->  數(shù)據(jù)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末陨簇,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子己单,更是在濱河造成了極大的恐慌纹笼,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異蠢笋,居然都是意外死亡鳞陨,警方通過(guò)查閱死者的電腦和手機(jī)厦滤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門掏导,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)趟咆,“玉大人值纱,你說(shuō)我怎么就攤上這事〔罄ⅲ” “怎么了咱筛?”我有些...
    開封第一講書人閱讀 152,878評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵迅箩,是天一觀的道長(zhǎng)沙热。 經(jīng)常有香客問(wèn)我罢缸,道長(zhǎng)枫疆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,306評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮圃泡,結(jié)果婚禮上愿险,老公的妹妹穿的比我還像新娘辆亏。我一直安慰自己扮叨,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著累提,像睡著了一般恍箭。 火紅的嫁衣襯著肌膚如雪扯夭。 梳的紋絲不亂的頭發(fā)上交洗,一...
    開封第一講書人閱讀 49,071評(píng)論 1 285
  • 那天构拳,我揣著相機(jī)與錄音,去河邊找鬼符糊。 笑死呛凶,一個(gè)胖子當(dāng)著我的面吹牛漾稀,可吹牛的內(nèi)容都是我干的崭捍。 我是一名探鬼主播,決...
    沈念sama閱讀 38,382評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼收擦!你這毒婦竟也來(lái)了谍倦?” 一聲冷哼從身側(cè)響起昼蛀,我...
    開封第一講書人閱讀 37,006評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤叼旋,失蹤者是張志新(化名)和其女友劉穎夫植,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體延欠,經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2 325
  • 正文 我和宋清朗相戀三年狞玛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了心肪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蒙畴。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡膳凝,死狀恐怖恭陡,靈堂內(nèi)的尸體忽然破棺而出休玩,到底是詐尸還是另有隱情拴疤,我是刑警寧澤,帶...
    沈念sama閱讀 33,732評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站蜒犯,受9級(jí)特大地震影響罚随,放射性物質(zhì)發(fā)生泄漏淘菩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望愿阐。 院中可真熱鬧趾疚,春花似錦、人聲如沸辛孵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)嚼隘。三九已至,卻和暖如春谤狡,著一層夾襖步出監(jiān)牢的瞬間墓懂,已是汗流浹背霉囚。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工逻澳, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留暖呕,地道東北人湾揽。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2 354
  • 正文 我出身青樓库物,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親诱告。 傳聞我的和親對(duì)象是個(gè)殘疾皇子民晒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2 345

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

  • 《時(shí)光》原創(chuàng) 文/紅塵一凡 時(shí)光是無(wú)情的刻刀靴姿, 雕刻出臉上的皺紋, 心上的傷痕宵晚! 唯獨(dú)驅(qū)趕不了 靈魂的溫情维雇! 時(shí)光...
    37度女人_8dda閱讀 186評(píng)論 0 1
  • 一個(gè)人必須有野心钝凶,才能得到想要的東西唁影,如果連想都不敢掂名,那么這個(gè)人不要提贏了据沈,連輸?shù)馁Y格都沒(méi)有。 想+干=成功饺蔑;等+...
    2edd223567a8閱讀 169評(píng)論 0 2
  • 張澤晉級(jí)锌介,單純、善良猾警、憨厚孔祸、實(shí)力,勝
    每天美天閱讀 170評(píng)論 0 0
  • 7月14日咖啡冥想 1发皿、補(bǔ)休中,在家聽金剛智慧的語(yǔ)音分享穴墅,邊聽邊覺(jué)察自己惶室,感覺(jué)聽語(yǔ)音分享凈化心靈,感恩帶給我金剛智...