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);
})
vue全家桶router、vuex、axios的更多相关文章
- vue 项目实战 (vue全家桶之--- vuex)
老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex 是属于vue中的什么 ...
- Vue全家桶之——Vuex
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vu ...
- vue学习(十二)vue全家桶 Vue-router&Vuex
一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-route ...
- 【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目
使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g ...
- vue全家桶+axios+jsonp+es6 仿肤君试用小程序
vue全家桶+axios+jsonp+es6 仿肤君试用小程序 把自己写的一个小程序项目用vue来实现的,代码里面有一些注释,主要使用了vue-cli,vue,vuex,vue-router,axoi ...
- 从零开始系列之vue全家桶(3)安装使用vuex
什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
随机推荐
- 如何实现从登录接口响应数据中提取JSESSIONID
通过调用接口,对服务器产生压力,单接口测试,会遇到响应数据返回的是要求先登录.这是我们在调用这个接口时,根据业务逻辑,必须先登录才可以,比如:提交订单,那么就需要先获取用户登录的JSESSIONID, ...
- Linux-使用之vim出现的问题
参考来源: https://stackoverflow.com/questions/47667119/ycm-error-the-ycmd-server-shut-down-restart-wit-t ...
- 微信二次分享的JSSDK的调用
网页端微信的二次分享如果不调用分享的SDK,分享之后就不会带有标题.描述 .缩略图 微信分享SDK调用 引入 <script src="//res.wx.qq.com/open/js/ ...
- 转:Nginx的超时keeplive_timeout配置详解
https://blog.csdn.net/weixin_42350212/article/details/81123932 Nginx 处理的每个请求均有相应的超时设置.如果做好这些超时时间的限定, ...
- ch5 对链接应用样式
简单的链接样式 对链接应用样式最容易的方式是:使用锚类型选择器,例如 a {color:red;} 链接伪类选择器:1.:link:寻找没有被访问过的链接2.:visited:寻找被访问过的链接 动态 ...
- Myeclipse 安装时候android adt, android sdk常见问题
离线版adt安装 可以随意百度adt下载 安装时候注意断网模式,否则会连接到服务器耗费很长时间:如果安装报错,可能是adt与Myeclipse版本不匹配,如我用的是Myeclipse8.6,安装AD ...
- Jackson自定义反序列化
// 设置jackson时间反系列化格式 SimpleModule module = new SimpleModule(); module.addDeserializer(Date.class, ne ...
- 九:File类,文件的操作
File的常用方法:
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片:响应式图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 5G/NR 波束管理
原文链接:http://www.sharetechnote.com/html/5G/5G_Phy_BeamManagement.html 1 为什么光束管理/光束控制? 我不认为高频部署中的波束传输信 ...