vue-router
Vue Router 是 Vue.js 官方的 路由管理器。
由 前端 來控制頁面的跳轉(zhuǎn)（但其實是個單頁面），根據(jù)不同的 url 地址展示不同的內(nèi)容和頁面骗爆。
- 優(yōu)點：體驗好芹敌，不需要每次從服務(wù)器獲取全部荧止，快速展現(xiàn)給用戶吹泡；
- 缺點：不利于SEO；使用瀏覽器的前進(jìn)器瘪，后退鍵的時候會重新發(fā)送請求翠储，沒有合理的利用緩存；單頁面無法記住之前滾動的位置娱局，無法在前進(jìn)和后退的時候記住滾動的位置彰亥。
路由的基本加載
簡單四步走
- 安裝
npm install --save vue-router
- 引用
import router from 'vue-router'
Vue.use(router)
- 配置路由文件，并在 vue 實例中注入
var rt = new router({
routes:[{
path:'/',//指定要跳轉(zhuǎn)的路徑
component:HelloWorld//指定要跳轉(zhuǎn)的組件
}]
})
new Vue({
el: '#app',
router:router,
components: { App },
template: '<App/>'
})
- 確定視圖加載的位置
<router-view></router-view>
路由的跳轉(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>
路由參數(shù)的傳遞
使用 params
···/helloworld/你好世界
路由：
- 必須在路由內(nèi)加入路由的 name
- 必須在 path 后加
/:+傳遞的參數(shù)
export default new router({
routes: [{
name: 'helloworld',
path: '/helloworld/:worldmsg', // 指定要跳轉(zhuǎn)的路徑
component: HelloWorld // 指定要跳轉(zhuǎn)的組件
}, {
name: 'helloearth',
path: '/helloearth/:earthmsg',
component: HelloEarth
}]
})
傳遞參數(shù)：
<router-link :to="{name: helloearth,params:{msg: 只有一個地球}}">
HELLO WORLD
</router-link>
接收參數(shù)：
$route.params.earthmsg
使用 query
···/helloworld?name=xxx&count=yyy
路由：
你可以創(chuàng)建一個函數(shù)返回 props衰齐。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型，將靜態(tài)值與基于路由的值結(jié)合等等继阻。
const router = new VueRouter({
routes: [{
path: '/search',
component: SearchUser,
props: (route) => ({msg: route.query.msg})
}]
})
傳遞參數(shù)：
<router-link :to="{path: '/helloearth',query:{msg: 只有一個地球}}">
HELLO WORLD
</router-link>
接收參數(shù)：
{{msg}}
Axios
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
- 安裝
npm install axios
- 引入加載
import axios from 'axios'
- 將 axios 全局掛載到 VUE 原型上
Vue.prototype.$http = axios
get 請求
getData(){
this.$http.get('https://cnodejs.org/api/v1/topics', {
params: {
page: 1,
limit: 10
}
})
.then(response => {
this.items = response.data.data
})
.catch(error => {
console.log(error)
})
}
兩種傳遞參數(shù)的形式：
axios.get('https://cnodejs.org/api/v1/topics', {
params: {
page: 1,
limit: 10
}
})
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=10')
post 請求
POST 傳遞數(shù)據(jù)有兩種格式：
- form-data?page=1&limit=10
- x--www--form--urlencoded { page: 1, limit: 10 }
在axios中，post請求接收的參數(shù)必須是 form-data瘟檩，
需要使用 qs 插件的 -qs.stringify 方法抹缕。
postData(){
this.$http.post(url, qs.stringify({
page: 1,
limit: 10
}))
.then(response => {
this.items = response.data.data
})
.catch(error => {
console.log(error)
})
}
Vuex
store
用來管理狀態(tài)，共享數(shù)據(jù)墨辛，在各個組件之間管理外部狀態(tài)卓研。
如何使用 Vuex 獲取狀態(tài)？
第一步：引入 vuex睹簇，并通過 use 方法使用它奏赘。
import Vuex from 'vuex'
Vue.use(Vuex)
第二步：創(chuàng)建狀態(tài)倉庫。
var store = new Vuex.Store({
state: {
XXX: xxx
}
})
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
第三步：通過 this.$store.state.XXX 直接拿到需要的數(shù)據(jù)（獲取狀態(tài)）太惠。
Vuex 的相關(guān)操作
如何改變狀態(tài)磨淌？
mutations
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
// 定義狀態(tài)改變函數(shù)
increase(state){
state.num++
},
decrease(state){
state.num--
}
}
})
通過 this.$store.commit('increase') 調(diào)用狀態(tài)改變函數(shù)。
actions
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
// 定義狀態(tài)改變函數(shù)
increase(state){
state.num++
},
decrease(state){
state.num--
}
},
actions: {
// context 為上下文對象
increaseAction(context){
// actions 中只能對 mutation 進(jìn)行操作凿渊，不直接變更狀態(tài)
context.commit('increase')
}
}
})
通過 this.$store.dispatch('increaseAction') 調(diào)用梁只。
actions 可以包含異步操作缚柳，但是 mutations 只能包含同步操作。
getters
var store = new Vuex.Store({
state: {
num: 88
},
···
getters: {
getNum(state){
return state.num > 0 ? state.num : 0
}
}
})
通過 this.$store.getters.getNum 拿到處理后的數(shù)據(jù)搪锣。
