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);
})

vue全家桶router、vuex、axios的更多相关文章

  1. vue 项目实战 (vue全家桶之--- vuex)

    老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex 是属于vue中的什么 ...

  2. Vue全家桶之——Vuex

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vu ...

  3. vue学习(十二)vue全家桶 Vue-router&Vuex

    一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-route ...

  4. 【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

    使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g ...

  5. vue全家桶+axios+jsonp+es6 仿肤君试用小程序

    vue全家桶+axios+jsonp+es6 仿肤君试用小程序 把自己写的一个小程序项目用vue来实现的,代码里面有一些注释,主要使用了vue-cli,vue,vuex,vue-router,axoi ...

  6. 从零开始系列之vue全家桶(3)安装使用vuex

    什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...

  7. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  8. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  9. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

随机推荐

  1. 如何实现从登录接口响应数据中提取JSESSIONID

    通过调用接口,对服务器产生压力,单接口测试,会遇到响应数据返回的是要求先登录.这是我们在调用这个接口时,根据业务逻辑,必须先登录才可以,比如:提交订单,那么就需要先获取用户登录的JSESSIONID, ...

  2. Linux-使用之vim出现的问题

    参考来源: https://stackoverflow.com/questions/47667119/ycm-error-the-ycmd-server-shut-down-restart-wit-t ...

  3. 微信二次分享的JSSDK的调用

    网页端微信的二次分享如果不调用分享的SDK,分享之后就不会带有标题.描述 .缩略图 微信分享SDK调用 引入 <script src="//res.wx.qq.com/open/js/ ...

  4. 转:Nginx的超时keeplive_timeout配置详解

    https://blog.csdn.net/weixin_42350212/article/details/81123932 Nginx 处理的每个请求均有相应的超时设置.如果做好这些超时时间的限定, ...

  5. ch5 对链接应用样式

    简单的链接样式 对链接应用样式最容易的方式是:使用锚类型选择器,例如 a {color:red;} 链接伪类选择器:1.:link:寻找没有被访问过的链接2.:visited:寻找被访问过的链接 动态 ...

  6. Myeclipse 安装时候android adt, android sdk常见问题

    离线版adt安装  可以随意百度adt下载 安装时候注意断网模式,否则会连接到服务器耗费很长时间:如果安装报错,可能是adt与Myeclipse版本不匹配,如我用的是Myeclipse8.6,安装AD ...

  7. Jackson自定义反序列化

    // 设置jackson时间反系列化格式 SimpleModule module = new SimpleModule(); module.addDeserializer(Date.class, ne ...

  8. 九:File类,文件的操作

    File的常用方法:

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片:响应式图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 5G/NR 波束管理

    原文链接:http://www.sharetechnote.com/html/5G/5G_Phy_BeamManagement.html 1 为什么光束管理/光束控制? 我不认为高频部署中的波束传输信 ...