一、前端路由的基本用法
1.安裝
npm install --save vue-router
2附迷、引用
import router from 'vue-router' //引入路由
Vue.use(router) // vue 提供的使用路由方法
3惧互、配置路由文件，并在vue實(shí)例中注入
var rt = new router({
routes: [{
path: '/',//指定要跳轉(zhuǎn)的路徑
component: HelloWorld//指定要跳轉(zhuǎn)的組件
}]
})
new Vue({
el: '#app',
router: rt, // 在vue實(shí)例中注入路由
components: { App },
template: '<App/>'
})
4喇伯、 確定視圖加載的位置
<router-view></router-view>
二喊儡、vue--router路由的跳轉(zhuǎn)
<router-link to="/"></router-link>
to后面接的是需要跳轉(zhuǎn)的路徑，如下：
<router-link to="/helloworld">HELLO WORLD</router-link>
三稻据、 vue--router路由參數(shù)的傳遞
1惹恃、必須在路由內(nèi)加入路由的name
export default new router({
routes: [
{
name:'helloworld', //在路由內(nèi)加入路由的name,名字可以自定義
path: '/HelloWorld/:worldmsg',
component: HelloWorld
},
]
})
2拷肌、必須在path后加/: +傳遞的參數(shù)
export default new router({
routes: [
{
name:'helloworld',
path: '/HelloWorld/:worldmsg', //必須在path后加 /: +傳遞的參數(shù)
component: HelloWorld
},
]
})
- 傳遞參數(shù)
首先在:to中引用前面定義的name名字姨俩，其中傳遞參數(shù)命名params是固定的設(shè)置鸟赫，不能更改
<ul>
<li>
/* 傳遞參數(shù) */
<router-link :to="{name:'helloworld',params:{worldmsg:'我的世界'}}">Hello World</router-link>
</li>
</ul>
4、接收參數(shù)
讀取參數(shù)： $route.params.XXX
<template>
<div class="hello">
<h3>{{$route.params.worldmsg}}</h3> //接收參數(shù)
</div>
</template>
補(bǔ)充一點(diǎn)：這是另外一種傳遞參數(shù)和接收參數(shù)方法今缚，目前用的不多算柳，后續(xù)可以再詳細(xì)了解。
<router-link
:to="{path: '/helloearth',query:{msg: 只有一個(gè)地球}}">HELLO WORLD</router-link>
方式：===/helloworld?name=XX&count=xxx
函數(shù)模式
四姓言、 Axios之get請求詳解
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端瞬项，它本身具有以下特征：
------------從瀏覽器中創(chuàng)建 XMLHttpRequest
------------從 node.js 發(fā)出 http 請求
------------支持 Promise API
------------攔截請求和響應(yīng)
------------轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
------------取消請求
------------自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
------------客戶端支持防止 CSRF/XSRF
- 安裝
npm install axios
- 引入加載
import axios from 'axios'
- 將axios全局掛載到VUE原型上
Vue.prototype.$http = axios;
- 發(fā)出請求 以cnode社區(qū)API為例子
methods:{
getdata:function(){
var self =this
this.$http.get('https://cnodejs.org/api/v1/topics',{
params:{ //還可以用下面提到第二種傳遞參數(shù)形式
page:1,
limit:15
}
})
.then(function(res){ //then()是promise中的方法，成功則調(diào)用事期，詳細(xì)可以看ES6
console.log(res)
self.items=res.data.data
})
.catch(function(err){ //catch()是promise中的方法滥壕，失敗時(shí)候調(diào)用纸颜，詳細(xì)可以看ES6
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為例展開學(xué)習(xí)
獲取主題列表API：https://cnodejs.org/api/v1/topics
參數(shù)：page頁碼兽泣、limit 每頁顯示的數(shù)量
五、 Axios之post請求詳解
post請求和get請求沒有太大區(qū)別胁孙，在get請求基礎(chǔ)上安裝一個(gè)插件qs插件唠倦，利用qs.stringify()方法傳遞參數(shù)。
1涮较、安裝
npm install qs
2稠鼻、引入
import qs from 'qs'
postdata:function(){
var self =this
this.$http.post(url,qs.stringify({
page:1,
limit:20
}))
.then(function(res){
console.log(res)
self.items=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 }
六、 初識(shí)Vuex之store
用來管理狀態(tài)狂票，共享數(shù)據(jù)候齿，在各個(gè)組件之間管理外部狀態(tài)
第一步：項(xiàng)目安裝vuex插件
npm i vuex
第二步：引入vuex，并通過use方法使用它
import Vuex from 'vuex'
Vue.use(Vuex)
第三步： 創(chuàng)建狀態(tài)倉庫
//創(chuàng)建狀態(tài)倉庫，注意第二個(gè)Store是大寫的不能改慌盯，,state也是不能改
var store = new Vuex.Store({
state:{
XXX：xxx
}
})
第四步：注入Vue實(shí)例當(dāng)中
new Vue({
el: '#app',
router,
store, //注入store,當(dāng)鍵名(key)和值(value)名字一樣可以這樣縮寫
components: { App },
template: '<App/>'
})
第五步：通過this.$sore.state.XXX拿到全局狀態(tài)
computed:{
getOutterNum:function(){
return this.$store.state.XXX
}
}
七周霉、Vuex的相關(guān)操作
vuex狀態(tài)管理的流程
view——->actions—–>mutations—–>state——->view
一、
方法一亚皂、更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation
var store = new Vuex.Store({
state:{
num:88
},
mutations:{ //定義狀態(tài)改變函數(shù)
increase:function(state){
state.num++
},
decrease:function(state){
state.num--
}
}
})
利用commit來觸發(fā)mutations函數(shù)
methods:{
sadd:function(){
this.$store.commit('increase') //commit方法里面是mutations定義的函數(shù)名
}
},
方法二：
利用actions中對(duì)mucations進(jìn)行操作俱箱，間接對(duì)state進(jìn)行修改
mutations:{
increase:function(state){
state.num++
},
decrease:function(state){
state.num--
}
},
actions:{ //actions中只能對(duì)mucations進(jìn)行操作
//context為上下文對(duì)象
decreaseActions:function(context){
context.commit('decrease') //decrease方法是mucations中定義的方法
}
}
})
利用dispatch來觸發(fā)actions函數(shù)
saddActions:function(){
//dispatch方法里面是actions定義的函數(shù)名
this.$store.dispatch('decreaseActions')
}
mucations和actions兩者之間區(qū)別
1、傳遞參數(shù)不一樣灭必，前者傳遞是state狞谱，后者傳遞是context。
2禁漓、調(diào)用的方式不一樣跟衅，前者靠this.$store.commit('xxx')觸發(fā)，后者靠this.$store.dispatch('xxx')觸發(fā)播歼。
3与斤、actions可以包含異步操作，但是mutation只能包含同步操作
actions:{
decreaseActions:function(context){
setTimeout(() => { //延時(shí)一秒的異步操作
context.commit('decrease')
}, 1000);
}
}
二荚恶、getters是vuex中的一個(gè)屬性撩穿，主要作用于vue中的計(jì)算屬性（computed）類似，用來存放一些經(jīng)過修改的數(shù)值
getters:{
getNum:function(state){
return state.num>0? state.num:0
}
}
在調(diào)用getters中的內(nèi)容是使用$store.getters.函數(shù)名進(jìn)行調(diào)用
computed:{
getParentNum:function(){
return this.$store.getters.getNum //getNum是getter里面定義方法
}
}
