vue3 + axios简单的路由传参

一、找到package.json文件 

查看组件有没有安装完成。如果没有安装，请输入命令安装

npm install axios

npm install vue-axios

二、找到main.js文件

全局引入的出入口，所有的组件都要引入到这里。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入axios组件
import axios from 'axios';
import VueAxios from 'vue-axios';
const app=createApp(App);
app.use(VueAxios,axios);
app.use(store).use(router).mount('#app')

HomeView.vue源码：

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <ul class="box ">
      <!-- index可以不写 -->
      <li v-for="(item, index) in arr" :key="item.uid">{{ index }}
        <img :src="item.imgurl" alt @click="About(item)" />
        <p>原价: <span>{{ item.uprice }}</span></p>
        <br>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { getCurrentInstance, ref } from 'vue'
export default {
  components: {
    HelloWorld
  },
  setup() {
    // vue3阿贾克斯固定格式
    const { proxy } = getCurrentInstance();
    //声明一个空数组，用这个数组来传参
    const arr = ref([]);
    const get = () => {
      // 请求数据
      const api = 'https://www.fastmock.site/mock/775d524a96d23ca9e8e837908a128d9b/_meituan/center'
      // axios可以替换为$http
      proxy.axios.get(api).then(response => {
        // console.log(response.data.datas);
        proxy.arr = response.data.datas;
        // console.log(proxy.arr);
      }).catch((error) => {
        console.log(error);
      })
    }
    get()
    const About = (id) => {
      console.log(id);
      proxy.$router.push({
        path: "/about", query: {
          aa: id.title,
          bb: id.price,
          cc: id.uprice,
          dd: id.imgurl,
          ee: id.sales,
        }
      })
    }
    return {
      get, About,arr
    }
  },
}
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  li {
    width: 180px;
  }

  img {
    width: 180px;
    height: 150px;
    margin-left: 5px;
    border-radius: 5px;
    // margin-right: 5px;
  }
}
</style>

AboutView.vue源码：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="h1">{{ $route.query.aa }}</div>
    <ul>
      <li>原价: {{ $route.query.cc }}</li>
      <li>套餐 : {{ $route.query.bb }}</li>
      <li> 库存：{{ $route.query.ee }}</li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.h1 {
  font-size: 28px;
  margin: 30px 0px 20px 0px;
  text-align: center;
  color: aquamarine;
}

img {
  width: 100%;
}
</style>

运行结果：