Vue -router路由和前端狀態(tài)管理

11.1 vue-router路由基本加載

簡單四步走

  1. 安裝
npm install --save vue-router
  1. 引用
import router from 'vue-router'
Vue.use(router)
  1. 配置路由文件,并在vue實例中注入
var rt = new router({
    routes:[{
        path:'/',//指定要跳轉(zhuǎn)的路徑
        component: HelloWorld//指定要跳轉(zhuǎn)的組件
    }]
})
new Vue({
    el: '#app',
    router:router,
    components: { App },
    template: '<App/>'
})
  1. 確定視圖加載的位置
<router-view></router-view>

11.2 vue -router路由的跳轉(zhuǎn)

<router-link to="/"></router-link>

<template>
    <ul>
        <li>
            <router-link to="/helloworld">HELLO WORLD</router-link>
        </li>
        <li>
            <router-link to="/helloearth">HELLO EARTH</router-link>
        </li>
    </ul>
</template>

11.3 vue -router路由參數(shù)的傳遞

1.必須在路由內(nèi)加入路由的name
2.必須在path后加/: +傳遞的參數(shù)

  1. 傳遞參數(shù)和接收參數(shù)看下邊代碼
<router-link :to="{name: helloearth,params:{msg: 只有一個地球}}">
    HELLO WORLD
</router-link>
讀取參數(shù): $route.params.XXX
方式:===/helloworld/你好世界

<router-link :to="{path: '/helloearth',query:{msg: 只有一個地球}}">
    HELLO WORLD
</router-link>
方式:===/helloworld?name=XX&count=xxx

函數(shù)模式

你可以創(chuàng)建一個函數(shù)返回 props梆暮。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型肠鲫,將靜態(tài)值與基于路由的值結(jié)合等等顽决。
const router = new VueRouter({
    routes: [
        { path: '/search', component: SearchUser, props: (route) => ({
            query: route.query.q }) }
        ]
})

11.3.1 Axios之get請求詳解

axios的簡介:

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端每辟,它本身具有以下特征:

  • 從瀏覽器中創(chuàng)建 XMLHttpRequest
  • 從 node.js 發(fā)出 http 請求
  • 支持 Promise API
  • 攔截請求和響應(yīng)
  • 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
  • 取消請求
  • 自動轉(zhuǎn)換JSON數(shù)據(jù)
  • 客戶端支持防止 CSRF/XSRF
  1. 安裝
npm install axios
  1. 引入加載
import axios from 'axios'
  1. 將axios全局掛載到VUE原型上
Vue.prototype.$http = axios;
  1. 發(fā)出請求 以cnode社區(qū)API為例子
// 為給定 ID 的 user 創(chuàng)建請求
使用傳統(tǒng)的function
getData(){
    var self = this;
    this.$http.get('https://cnodejs.org/api/v1/topics')
    .then(function (res) {
    //此處的this指向的不是當前vue實例
        self.items = res.data.data
        console.log(res.data.data)
    })
    .catch(function (err) {
        console.log(err)
    })
}

// 可選地叶堆,上面的請求可以這樣做
兩種傳遞參數(shù)的形式
axios.get('/user', {
    params: {
    ID: 12345
    }
})
axios.get('/user', {
    ID: 12345
})
---------------------------------
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')

使用CNODE社區(qū)官方的API為例展開學習
獲取主題列表API:https://cnodejs.org/api/v1/topics
參數(shù):page頁碼
limit 每頁顯示的數(shù)量

11.3.1 Axios之post請求詳解

// 為給定 ID 的 user 創(chuàng)建請求
使用傳統(tǒng)的function
getData(){
    var self = this;
    this.$http.post(url,{
        page:1,
        limit:10
     })
    .then(function (res) {
        //此處的this指向的不是當前vue實例
        self.items = res.data.data
        console.log(res.data.data)
     .catch(function (err) {
        console.log(err)
      })
}

POST傳遞數(shù)據(jù)有兩種格式:

  • form-data ?page=1&limit=48
  • x-www-form-urlencoded { page: 1,limit: 10 }

在axios中塔淤,post請求接收的參數(shù)必須是form-data
qs插件—-qs.stringify

11.4 Vuex之store

用來管理狀態(tài)摘昌,共享數(shù)據(jù),在各個組件之間管理外部狀態(tài)
如何使用高蜂?
第一步:引入vuex聪黎,并通過use方法使用它
第二步: 創(chuàng)建狀態(tài)倉庫
第三步:通過this.$sore.state.XXX直接拿到需要的數(shù)據(jù)

//創(chuàng)建狀態(tài)倉庫,注意Store,state不能改
var store = new Vuex.Store({
    state:{
        XXX:xxx
    }
})
//直接通過this.$sore.state.XXX拿到全局狀態(tài)

11.5 Vuex的相關(guān)操作

vuex狀態(tài)管理的流程
view———->actions———–>mutations—–>state————->view
除了能夠獲取狀態(tài)如何改變狀態(tài)呢备恤?

//創(chuàng)建狀態(tài)倉庫稿饰,注意Store,state不能改
var store = new Vuex.Store({
    state:{
        XXX:xxx
    },
    mutations:{

    }
})

調(diào)用: this.$store.commit(XXX);
此處的XXX是你在mucations中定義的方法名

var store = new Vuex.Store({
    state:{
        XXX:xxx
    },
    mucations:{
        a:function(state){

        }
    },
    actions:{
        b:function(context){
            context.commit('a');
        }
    }
})

調(diào)用: this.$store.dispatch(XXX);

getters:{
}

調(diào)用: this.$store.getters.getCount

注意:actions提交的是mutation,而不是直接變更狀態(tài)
actions可以包含異步操作,但是mutation只能包含同步操作

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末露泊,一起剝皮案震驚了整個濱河市喉镰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌惭笑,老刑警劉巖侣姆,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件生真,死亡現(xiàn)場離奇詭異,居然都是意外死亡捺宗,警方通過查閱死者的電腦和手機柱蟀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來偿凭,“玉大人,你說我怎么就攤上這事派歌⊥淠遥” “怎么了?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵胶果,是天一觀的道長匾嘱。 經(jīng)常有香客問我,道長早抠,這世上最難降的妖魔是什么霎烙? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮蕊连,結(jié)果婚禮上悬垃,老公的妹妹穿的比我還像新娘。我一直安慰自己甘苍,他們只是感情好尝蠕,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著载庭,像睡著了一般看彼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上囚聚,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天靖榕,我揣著相機與錄音,去河邊找鬼顽铸。 笑死茁计,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的谓松。 我是一名探鬼主播簸淀,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼毒返!你這毒婦竟也來了租幕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤拧簸,失蹤者是張志新(化名)和其女友劉穎劲绪,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡贾富,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年歉眷,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颤枪。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡汗捡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出畏纲,到底是詐尸還是另有隱情扇住,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布盗胀,位于F島的核電站艘蹋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏票灰。R本人自食惡果不足惜女阀,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望屑迂。 院中可真熱鬧浸策,春花似錦、人聲如沸惹盼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽逻锐。三九已至夫晌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間昧诱,已是汗流浹背晓淀。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留盏档,地道東北人凶掰。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像蜈亩,于是被迫代替她去往敵國和親懦窘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

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

  • 11.1 vue--router路由基本加載 小案例:在根路徑下只顯示圖片稚配,在/hello下即顯示圖片又顯示hel...
    sweetBoy_9126閱讀 723評論 0 0
  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計架構(gòu)和**解決方案**畅涂。> > 庫(lib...
    Rui_bdad閱讀 2,907評論 1 4
  • 1、active-class是哪個組件的屬性道川?嵌套路由怎么定義午衰?答:vue-router模塊的router-lin...
    jane819閱讀 1,751評論 0 15
  • vue筆記 一.vue實例 vue的生命周期 beforeCreate(創(chuàng)建前), created(創(chuàng)建后), b...
    秋殤1002閱讀 1,054評論 0 1
  • 風給了水心跳 一輪又一輪的跟隨 走到盡頭 才發(fā)現(xiàn) 風的世界太大 水的世界太小
    微伊笑閱讀 472評論 20 30