vue全家桶router、vuex、axios

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'
import Axios from 'axios'

Vue.prototype.$axios=Axios

Axios.defaults.baseURL="http://www.wwtliu.com"

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    store,
    components: {App},
    template: '<App/>'
})

一、router

import Vue from 'vue'
import Router from 'vue-router'
import all from '@/components/all'

Vue.use(Router)

const router = new Router({
    mode: "history",
    routes: [
        {
            path: '/',
            redirect: "/all"
        },
        {
            path: '/all',
            component: all
        },
        {
            path: '/all/:data',
            component: all
        }
    ]
})

export default router;

<router-link to="/all" tag="li">全部</router-link>

<router-view/>

this.$router.push({name:'',path:'',query:{data:''},params:{data:''}})

this.$route.query.data
this.$route.params.data

路由守卫：

beforeRouteEnter(to,from,next){
    if(false){
        next();
    }else{
        next("/login");
    }
}

router.beforeEach((to,from,next)=>{
    if(to.path=="/info" && false){
        next()
    }else{
        next("/login")
    }
})

二、vuex

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        list:[]
    },
    mutations: {
        add(state,arg){
            state.list.push(arg);
        }
    },
    getters:{
        activelist(state){
            return state.list.filter(item=>item.tasksty)
        }
    },
    actions:{
        //异步处理
        saveDataAction(arg_store){
            arg_store.commit('add','data_data_data');
        }
    }
})

export default store;

this.$store.dispatch("saveDataAction");

<input type="text" placeholder="你打算做什么？"  @keyup.enter="modelvalue">

methods:{
    modelvalue(ev){
        this.$store.commit("add",{taskval:ev.target.value,tasksty:false});
    }
}

<li v-for="li in list"></li>
<li v-for="li in activelist"></li>

import {mapState,mapGetters} from "vuex"
computed:{
    ...mapState(["list"]),
    ...mapGetters(["activelist"])
}

三、axios

this.$axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}, {
    headers: {
        'token': ''
    },
    responseType: 'blob'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

this.$axios.get('/user', {
    headers: {
        'token': ''
    },
    responseType: 'blob',
    params:{
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

this.$axios.interceptors.request.use(req => {
    return req;
},err => {
    return Promise.reject(err);
})

this.$axios.interceptors.response.use(res => {
    return res;
},err => {
    return Promise.reject(err);
})