vue：路由插件vue-router与引入axios

最新推荐文章于 2024-06-01 15:27:07 发布

ForestSpringH

最新推荐文章于 2024-06-01 15:27:07 发布

阅读量964

点赞数 2

分类专栏：前端学习 web学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59588838/article/details/128432146

版权

web学习同时被 2 个专栏收录

90 篇文章 3 订阅

订阅专栏

前端学习

18 篇文章 0 订阅

订阅专栏

一、前言

祝大家圣诞节快乐！这里给大家送圣诞树表演：http://happy.idystudyclass.cn

二、技术点

有一段时间没有发布新的文章了，之前不是在学习vue2嘛，最近忙着给别人写web期末作品，所以一直没时间更新，当然也是我自己想休息一段时间，本次主要是总结router路由与axios通常在前端开发中的使用。

三、实现步骤

安装相应的插件与外部库依赖包：

使用任何一个插件或者外部库，都需要将它的包导入到相应的位置，这样才能使用webapk打包技术给这些包的索引编制出来，在vue中这个存储外部库或者插件的地方就是node_modules这个包，

咱们需要采用npm install 对应的需要导包的名称 --save--dev(这个后缀非必要是不用的)。

具体的命令参考给出的外部库的官方文档。

axios：npm i axios

vue-router： npm install vue-router@3.1.3 --save-dev

默认下载的vue-router版本较高与vue2不是很兼容，会报错，尽量选取3.1.0左右的版本。

element-ui：npm i element-ui -S

main.js引入依赖以及配置axios与router的全局使用

下面代码是将axios直接配置到Vue的原型对象中去达到全局使用的方法，通常为了更好的管理API与baseURL等配置，会建立独立的文件夹api管理axios。

import axios from 'axios'
import ElementUI from 'element-ui'
import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
//声明式使用饿了么UI
Vue.use(ElementUI)
//将axios直接配置到原型对象上去
Vue.prototype.$axios = axios
//关闭生产提示信息
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
//将router插件进行挂载
  router,
  created() {
//配置一条全局事件总线，可以适当的完成数据交互
    Vue.prototype.$bus = this
  }
}).$mount('#app')

四、编码实现

说明axios直接使用时需要注意的点：

发送get请求时注意请求的简写方式：

     doLogin(){
            let param = {
                userPhone: this.user.userPhone,
                userPassword: this.user.userPassword
            }
            axios.get("http://127.0.0.1:9000/login/",{params:param}).then(
                res =>{
                    if(res.data.code == 1){
                        // let _this = res.data.data
                        console.log(res.data.data)
                  window.sessionStorage.setItem('userData',JSON.stringify(res.data.data) )
                        this.$router.push({path:'/home',query:{
                            user: res.data.data,
                        }})
                    }
                }
            )
        }

这里需要注意其中传输参数的写法：{params: param}其中param是对象类型。

发送post请求时注意请求的简要写法：

          axios.post('http://127.0.0.1:9000/put/',this.recordDTO).then(
                res =>{
                    if(res.data.data){
                        window.alert('success')
                        this.handerColse()
                    }
                }
            )
            recordDTO:{
                recordId:null,
                recordUserName:'',
                recordTime:null,
                recordState:false,
                recordNextProgress:0
            },

这里注意post传输的都是对象类型的数据，在后端接收时需要采取@RequestBody等注解声明一下接收的参数类型。

说明vue-router的使用方法：

首先需要了解路由的含义，在计算机网络中我们不难知道路由器的作用是根据数据包中含带的目标地址查询路由表将数据收发给它该去的下一个节点，那么不难得知我们的路由势必也是根据每一个组件的标记，将你想去标记的组件挂载显示出来。那么这里我们就要认识单个route的结构了;

        {
            path: '/',
            name: '登录',
            component: loginVue,
        },

从上面的单个route（路由）的结构我们可以看到path与component两个词，很明显这说明了path的作用就是标记也即是路由器查看的地址，我们可以将该地址作为目标地址让router给我们显示出来，具体显示在哪里需要看<router-view></router-view>的位置是放在哪里？

那么了解了路由的结构与作用，我们就来编码使用它：

首先建立一个index.js的文件，在里面new 一个 Router对象，并按照需求填写里面的路由等相关配置：

import Router from 'vue-router'
import Vue from 'vue'

Vue.use(Router)

import loginVue from '../components/Login.vue'
import homeVue from '../components/Home.vue'
import registerVue from '../components/Register.vue'
import addApply from '../components/AddApply.vue'
import applyList from '../components/ApplyList.vue'

const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return routerPush.call(this, location).catch(error => error)
}

export default new Router({
    routes: [
        {
            path: '/',
            name: '登录',
            component: loginVue,
        },
        {
            path: '/home',
            name: '主页',
            component: homeVue,
            props(route) {
                return {
                    user: route.query.user
                }
            }
        },
        {
            path: '/register',
            name: '注册',
            component: registerVue
        },
        {
            path: '/addApply',
            name: '增加申请',
            component: addApply
        },
        {
            path: '/applyList',
            name: '申请记录',
            component: applyList
        }
    ],
    mode: 'history',
    base: '/#/'
})

我们很容易看到里面将组件给引入了，然后在routes的数组里规定了一些常用路由结构。也规定了访问路由组件时路径变化为 /#/** ，具体的其他内容请查看 vue-router的中文文档。

其后在APP.vue里规定路由组件显示的位置：

<template>
  <div id="app">
    <el-header style="background-color: transparent ;">
       .....
    </el-header>

    <el-main>
          <router-view></router-view>
    </el-main>
  
  </div>
</template>

最后跳转路由的方式如下案例（还有就是a href = "/某个路由" 标签，以及自带的<router-link to="/某个路由"></router-link>）：

    home(){
      this.$router.push({
        path: '/home',
        query: {
          user: eval("(" + window.sessionStorage.getItem('userData') + ")")
        }
      })
    },
    addApply(){
      this.$router.push({path:'/addApply'})
    },
    record(){
      this.$router.push({path:'/applyList'})
    }

关于路由的两种携带参数的格式与用法以及路由导航与路由守卫等高级用法，大家详见中文文档，篇幅较长，不便赘述。