vue--router路由基本加載
可以分為四步 ：具體流程如下 ：
- 安裝
在命令行中 進(jìn)入到自己的項(xiàng)目目錄輸入一下命令 安裝依賴：
npm install --save vue-router
- 在需要用到路由跳轉(zhuǎn)的模塊中引用(本文是在在入口文件
main.js進(jìn)行設(shè)置)
import router from 'vue-router'
Vue.use(router)
- 配置路由文件绳军，并在
vue實(shí)例中注入
// 配置路由
var rt = new router({
routes: [
// 可以定義多個(gè)路由
{
path: '/hello', //指定要跳轉(zhuǎn)的路徑
component: HelloWorld //指定要跳轉(zhuǎn)的組件
}
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
// 注入到實(shí)例
router: rt,
components: { App },
template: '<App/>'
})
- 確定視圖加載的位置
<router-view></router-view>
image.png
具體代碼：
GIFx.gif
vue--router路由的跳轉(zhuǎn)
首先在路由模塊router中定義路由
定義要跳轉(zhuǎn)的組件：
image.png
開(kāi)始跳轉(zhuǎn)
image.png
效果動(dòng)圖：
GIF動(dòng)圖.gif
vue-router路由參數(shù)的傳遞
第一步
- 一.必須在路由內(nèi)加入路由的name
- 二.必須在path后加/: +傳遞的參數(shù)
// 不論在那個(gè)模塊中使用 必須首先引入
import Vue from 'vue'
import router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import HelloEarth from '../components/HelloEarth'
// 使用
Vue.use(router)
// 配置路由 ----- export default 一個(gè)模塊像被其他模塊引用 首先要導(dǎo)出
export default new router({
routes: [
// 可以定義多個(gè)路由
{
//定義name
name: 'helloworld',
path: '/helloworld/:worldmsg', //指定要跳轉(zhuǎn)的路徑 /: 后面是要傳遞的參數(shù)
component: HelloWorld //指定要跳轉(zhuǎn)的組件
}, {
//定義name
name: 'helloearth',
path: '/helloearth/:earthmsg', //指定要跳轉(zhuǎn)的路徑 /: 后面是要傳遞的參數(shù)
component: HelloEarth //指定要跳轉(zhuǎn)的組件
},
]
})
第二步 在:to后面設(shè)置 需要傳遞的參數(shù)
<template>
<ul>
<li>
<!-- 在:to后面設(shè)置 需要傳遞的參數(shù) -->
<router-link :to="{name:'helloworld',params:{worldmsg:'你好時(shí)節(jié)'}}">Hello World</router-link>
</li>
<li>
<router-link :to="{name:'helloearth',params:{earthmsg:'你好地丟'}}">Hello Earth</router-link>
</li>
</ul>
</template>
<script>
export default {
name : "list"
}
</script>
<style lang="">
</style>
第三步渲染到頁(yè)面上
固定格式為：
讀取參數(shù)： $route.params.XXX
<h3>{{$route.params.worldmsg}}</h3>
<h3>{{$route.params.earthmsg}}</h3>
Axios之get請(qǐng)求詳解
可以分為幾步：具體如下
- 安裝
npm install axios
- 在項(xiàng)目中引入加載
import axios from 'axios'
-
將axios全局掛載到Vue實(shí)例上
$http是你自己起的名字
Vue.prototype.$http = axios
-
發(fā)送請(qǐng)求 （此處以cnode社區(qū)api為例）
使用CNODE社區(qū)官方的API為例展開(kāi)學(xué)習(xí)
獲取主題列表API：https://cnodejs.org/api/v1/topics
參數(shù)：page頁(yè)碼
limit每頁(yè)顯示的數(shù)量
//使用傳統(tǒng)的function
<template>
<div class="hello">
<H3>我是axios 用來(lái)發(fā)送請(qǐng)求 和 攔截響應(yīng)</H3>
<button @click="getData">發(fā)送請(qǐng)求</button>
<ul>
<li v-for="(item,index) in items" :key="index">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
// 下面用到了Vue 首先要引入
import Vue from 'vue'
// 第一步 首先要安裝 npm install axios
// 第二部 引入
import axios from 'axios'
// 第三步 將axios全局掛載到VUE原型上 $.后面隨便命名
Vue.prototype.$http = axios
export default {
name: 'HelloWorld',
data () {
return {
items : []
}
},
methods: {
// 發(fā)送請(qǐng)求 攔截響應(yīng)的過(guò)程 當(dāng)點(diǎn)擊按鈕時(shí) 請(qǐng)求 cnede社區(qū)主頁(yè)內(nèi)容
getData(){
var self = this;
// 可以設(shè)置參數(shù) 在url后面設(shè)置 也可以在鏈接上設(shè)置參數(shù) ?page:1&limit:10
this.$http.get('https://cnodejs.org/api/v1/topics',{
params:{
page:1,
limit:10
}
})
.then(function(res){
// 注意此處的this不是當(dāng)前的Vue實(shí)例 需要在前面賦值一下 注意 后臺(tái)請(qǐng)求的數(shù)據(jù)是數(shù)組 需要遍歷一下 在進(jìn)行操作 this es6語(yǔ)法 則會(huì)直接繼承父元素 .then(res=>{this.items = res.data.data console.log(res.data.data})
self.items = res.data.data
console.log(res.data.data)
})
.catch(function(err){
console.log(err)
})
}
},
}
</script>
可以設(shè)置參數(shù) 在url后面設(shè)置 也可以在鏈接上設(shè)置參數(shù) ?page:1&limit:10
.then(function(res){
// 注意此處的this不是當(dāng)前的Vue實(shí)例 需要在前面賦值一下 注意 后臺(tái)請(qǐng)求的數(shù)據(jù)是數(shù)組 需要遍歷一下 在進(jìn)行操作 this es6語(yǔ)法 則會(huì)直接繼承父元素 .then(res=>{this.items = res.data.data console.log(res.data.data})
self.items = res.data.data
console.log(res.data.data)
})
.catch(function(err){
console.log(err)
})
Axios之post請(qǐng)求詳解
POST傳遞數(shù)據(jù)有兩種格式：
form--data ?page=1&limit=48
x-www--form--urlencoded { page: 1,limit: 10 }
在axios中叹谁，post請(qǐng)求接收的參數(shù)必須是form--data
要安裝qs插件—-qs.stringify
具體如下：
在當(dāng)前項(xiàng)目中安裝qs插件
npm install qs
在當(dāng)前項(xiàng)目模塊中引入
import qs from 'qs'
postData(){
var self = this;
// 可以設(shè)置參數(shù) 在url后面設(shè)置 也可以在鏈接上設(shè)置參數(shù) ?page:1&limit:10
this.$http.post('https://cnodejs.org/api/v1/topics',qs.stringify(
{
page:1,
limit:10
}
))
.then(function(res){
// 注意此處的this不是當(dāng)前的Vue實(shí)例 需要在前面賦值一下 注意 后臺(tái)請(qǐng)求的數(shù)據(jù)是數(shù)組 需要遍歷一下 在進(jìn)行操作 this es6語(yǔ)法 則會(huì)直接繼承父元素 .then(res=>{this.items = res.data.data console.log(res.data.data})
self.items = res.data.data
console.log(res.data.data)
})
.catch(function(err){
console.log(err)
})
},
},
Vuex之store
用來(lái)管理狀態(tài)埂陆，共享數(shù)據(jù)煌张，在各個(gè)組件之間管理外部狀態(tài)呐赡，應(yīng)用場(chǎng)景 大型電商項(xiàng)目各個(gè)單頁(yè)面中共有的 登錄顯示狀態(tài)
如何使用？
- 首先安裝插件：
注意install可以簡(jiǎn)寫(xiě)為num i vuex
npm i vuex
- 第二步 在入口文件
min.js引入vuex骏融，并通過(guò)use方法使用它
import Vuex from 'vuex'
Vue.use(Vuex)
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.use(Vuex)
// 創(chuàng)建狀態(tài)倉(cāng)庫(kù)
var store = new Vuex.Store({
state: {
num: 88
}
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
// 注入
store,
components: { App },
template: '<App/>'
})
- 第三步 創(chuàng)建狀態(tài)管理倉(cāng)庫(kù) 并在實(shí)例中注入
// 創(chuàng)建狀態(tài)倉(cāng)庫(kù)
var store = new Vuex.Store({
state: {
num: 88
}
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
// 注入
store,
components: { App },
template: '<App/>'
})
- 第四步 通過(guò)
this.$sore.state.XXX直接拿到需要的數(shù)據(jù)
注意本例狀態(tài)管理設(shè)置為num ：88
<template>
<div>
我是組件outter中的全局狀態(tài){{outNum}}
</div>
</template>
<script>
export default {
name: 'outter',
computed: {
outNum: function () {
//直接通過(guò)this.$sore.state.XXX拿到全局狀態(tài) 88
return this.$store.state.num
}
},
}
</script>
<style lang="">
</style>
全局狀態(tài)
Vuex的相關(guān)操作
vuex狀態(tài)管理的流程
view———->actions(可包含異步)———–>mutations（只能同步）—–>state————->view
除了能夠獲取狀態(tài)如何改變狀態(tài)呢链嘀？小栗子：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 創(chuàng)建狀態(tài)倉(cāng)庫(kù)
export default new Vuex.Store({
state: {
num: 88
},
// 改變狀態(tài) 但是mutation只能包含同步操作
mutations: {
// increase: function(state) {
// } 下面是es6語(yǔ)法：
increase(state) {
state.num++
},
decrease(state) {
state.num = state.num - 30
}
},
// actions只能對(duì)mutations操作 actions可以包含異步操作，但是mutation只能包含同步操作
actions: {
// context 上下文對(duì)象
decreaseAction(context) {
// actions可以包含異步操作
// setTimeout(function() {
// context.commit('decrease')
// }, 1000)
context.commit('decrease')
}
},
// 處理狀態(tài)
getters: {
getNum(state) {
return state.num > 0 ? state.num : 0;
}
}
})
調(diào)用 ：
this.$store.commit(increase);
此處的increase是你在mucations中定義的方法名
注意：actions提交的是mutation,而不是直接變更狀態(tài)
actions可以包含異步操作档玻，但是mutation只能包含同步操作
