Vue+iview-admin+axios+webpack+vue-router

一、环境搭建

安装基础配置

[code]npm i -g vue-cli    # 全局安装vue脚手架
vue init webpack vue-demo    # 初始化安装项目模板
cd vue-demo
npm i --save axios    # 数据请求插件

配置入口文件

[code]import Vue from 'vue'
import iView from 'iview'

import App from './App'
import router from './router'
import 'iview/dist/styles/iview.css'

Vue.config.productionTip = false;

Vue.use(iView)

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

路由配置

[code]import Vue from 'vue'
import Router from 'vue-router'

import Index from '@/commponents/page/index/index'
import Login from '@/commponents/page/login/login'
import Home from '@/commponents/page/home/home'
import Router1 from '@/commponents/page/product/router/router1'
import Router2 from '@/commponents/page/product/router/router2'

Vue.use(Router)

export default new Router({
mode: 'history',
routers: [
{
path: '/',
name: 'index',
component: Index
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/product',
name: 'product',
component: Product,
children: [
{ path: '/router1', name: 'router1', component: Router1 },
{ path: '/router2', name: 'router2', component: Router2 }
]
}
]
})

二、axios设置请求头

get请求设置请求头：

[code]import axsios from 'axios'

axios.get('/api', {
headers: {
'Authorization': 'Bearer ' + token,
'Cookie': 'sessionId' + sessionId + '; recId=' + recId
},
params: {
name: 'zhangsan',
password: 123456
}
}).then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err)
})

post请求设置请求头：

[code]import axios from 'axios'

axios.post('/api',{
name: 'zhangsan',
password: 123456
}, {
headers: {
'Authorization': 'Bearer ' + token,
'Cookie': 'sessionId' + sessionId + '; recId=' + recId
}
}).then(function (res) {
console.log(res)
}).catch(function (err) {
console.log(err)
})

配置axios，index.js

[code]// 引入axios插件
import axios from 'axios'

// 配置请求头
const config = {
headers: {
'Authorization': 'Bearer ' + token,
'Cookie': 'sessionId' + sessionId + '; recId=' + recId
}
}

// 设置全局的axios
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 自定义请求实例
const ajax = axios.create({
url: '/api',
baseURL: 'https://some-domain.com/api/',
method: 'get',
data: {},
params: {},
header: {},
timeout: 1000,
responseType: 'json'
})

//自定义函数
function main(msg) {
console.log(msg)
}

// 导出配置信息
export {
config,
ajax,
main
}

导入index.js

[code]<template>
<div id="app">

</div>
</template>

<script>
import {config, ajax, main} from './index.js'

console.log(config);
console.log(ajax);
console.log(main);

</script>

<style lang="" scoped>

</style>

三、配置路由

路由传参

[code]<template>
<div id="home">
<router-link :to="{ name: 'index', query: {title: '欢迎登录'} }">
</div>
</template>

<script>
export default {
name: 'home',
data () {
return {}
}
}
</script>

<style lang="">

</script>

路由参数接收

[code]<template>
<div id="app">
<h1> {{ title }} </h1>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
message: 'Hello World !'
}
},
computed: {
title () {
return this.$route.query.title ? this.$route.query.title : this.message;
}
}
}
</script>

<style lang="" scoped>

</style>