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ù)