vue路由的配置和使用，axios的使用

首先我们要导入路由的依赖
npm install vue-router–save 1
然后我们配置vue项目里面的main.js

import router from "./router/index";

new Vue({
  render: h => h(App),
  router, //使用路由配置
}).$mount('#app')

然后就是在router文件夹下面配置你的index.js

import Login from '../components/Login.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },

第4步 配置APP.VUE

<template>
  <div id="app">
    <!-- 路由的出入口，路由的内容将被显示在这里 -->
    <router-view/>
  </div>
</template>
 
<script>
  export default {
    name: 'App'
  }
</script>

这样我们的vue路由就可以使用

然后我们如果要点击跳转就把配置好的path给到对应位置

比如

<el-menu-item index="/zhuye">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>

上面的index就是对应的路由地址
如果我们点击首页就会自动跳转到对象zhuye.vue路由界面

axios
一般情况用到axios就是点击事件然后获取到参数或者传递参数
所以我们通常要通过一个click事件来触发他。

1 配置一个click事件

<el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>

2 导入axios文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3 编写axios

<script>
  import axios from 'axios'

export default {
  data() {
    return {
      form: {
        id: '',
        price:'',
      }
    }
  },
  methods: {
    onSubmit() {
      axios.post('http://localhost:8088/std/gr/goods/add',{
        id: this.form.id,
        price: this.form.price
      }).then(function(res){
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>