vue-router
Vue Router 是 Vue.js 官方的 路由管理器。
由 前端 来控制页面的跳转（但其实是个单页面），根据不同的 url 地址展示不同的内容和页面。
- 优点：体验好，不需要每次从服务器获取全部，快速展现给用户；
- 缺点：不利于SEO；使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存；单页面无法记住之前滚动的位置，无法在前进和后退的时候记住滚动的位置。
路由的基本加载
简单四步走
- 安装
npm install --save vue-router
- 引用
import router from 'vue-router'
Vue.use(router)
- 配置路由文件，并在 vue 实例中注入
var rt = new router({
routes:[{
path:'/',//指定要跳转的路径
component:HelloWorld//指定要跳转的组件
}]
})
new Vue({
el: '#app',
router:router,
components: { App },
template: '<App/>'
})
- 确定视图加载的位置
<router-view></router-view>
路由的跳转
<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>
路由参数的传递
使用 params
···/helloworld/你好世界
路由：
- 必须在路由内加入路由的 name
- 必须在 path 后加
/:+传递的参数
export default new router({
routes: [{
name: 'helloworld',
path: '/helloworld/:worldmsg', // 指定要跳转的路径
component: HelloWorld // 指定要跳转的组件
}, {
name: 'helloearth',
path: '/helloearth/:earthmsg',
component: HelloEarth
}]
})
传递参数：
<router-link :to="{name: helloearth,params:{msg: 只有一个地球}}">
HELLO WORLD
</router-link>
接收参数：
$route.params.earthmsg
使用 query
···/helloworld?name=xxx&count=yyy
路由：
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
const router = new VueRouter({
routes: [{
path: '/search',
component: SearchUser,
props: (route) => ({msg: route.query.msg})
}]
})
传递参数：
<router-link :to="{path: '/helloearth',query:{msg: 只有一个地球}}">
HELLO WORLD
</router-link>
接收参数：
{{msg}}
Axios
axios的简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 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)
})
}
两种传递参数的形式：
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 传递数据有两种格式：
- formdata?page=1&limit=10
- x-www-form-urlencoded { page: 1, limit: 10 }
在axios中，post请求接收的参数必须是 formdata，
需要使用 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
用来管理状态，共享数据，在各个组件之间管理外部状态。
如何使用 Vuex 获取状态？
第一步：引入 vuex，并通过 use 方法使用它。
import Vuex from 'vuex'
Vue.use(Vuex)
第二步：创建状态仓库。
var store = new Vuex.Store({
state: {
XXX: xxx
}
})
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
第三步：通过 this.$store.state.XXX 直接拿到需要的数据（获取状态）。
Vuex 的相关操作
如何改变状态？
mutations
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
// 定义状态改变函数
increase(state){
state.num++
},
decrease(state){
state.num--
}
}
})
通过 this.$store.commit('increase') 调用状态改变函数。
actions
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
// 定义状态改变函数
increase(state){
state.num++
},
decrease(state){
state.num--
}
},
actions: {
// context 为上下文对象
increaseAction(context){
// actions 中只能对 mutation 进行操作，不直接变更状态
context.commit('increase')
}
}
})
通过 this.$store.dispatch('increaseAction') 调用。
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 拿到处理后的数据。
