vite项目axios部分，vue项目引入公共组件，底部路由跳转

vite项目axios部分，vue项目引入公共组件，底部路由跳转

axios部分

1、命令行输入 npm i axios，安装完成后输入 npm run dev重启项目
2、在util文件夹内修改request.js文件
注：本项目的src文件夹内的各个文件
api-----------------存放接口js文件
assets--------------图片
components-------公共组件，如头部、底部
router/index.js-----路由
store/index.js------系统缓存部分，如token、userInfo
style----------------样式文件
utils/request.js-----封装统一的请求，如将token添加至请求头
view----------------各部分页面，如login、index

3、utils/request.js文件内

import axios from 'axios'

const request = axios.create({
    baseURL: 'https://请求接口url'
})

export default request

vue项目引入公共组件

1、前提：该项目已经安装vant组件
2、在components文件夹内新建LayoutFooter.vue

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search">分类</van-tabbar-item>
    <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
  </van-tabbar>

</template>

<style scoped>

</style>

3、项目首页（home/index.vue）内容如下：

<template>
    <div>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="success">成功按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
        <layout-footer></layout-footer>
    </div>
</template>

<script setup>
    import LayoutFooter from '@/components/LayoutFooter.vue'
</script>

<style scoped>

</style>

4、项目展示：

底部路由跳转

1、components/LayoutFooter.vue

<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search">分类</van-tabbar-item>
    <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
    <van-tabbar-item replace to="/my" icon="setting-o">个人中心</van-tabbar-item>
  </van-tabbar>

</template>

<style scoped>
  .van-tabbar{
    position: fixed !important;
  }
</style>

2、router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

// 路由规则配置
const routes = [{
    path: '/login',
    name: 'login',
    component: () =>
        import ('@/views/login/index.vue')
}, {
    path: '/',
    name: 'home',
    component: () =>
        import ('@/views/home/index.vue')
}, {
    path: '/my',
    name: 'my',
    component: () =>
        import ('@/views/my/index.vue')
}]

// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

3、home/index.vue

<template>
    <div>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="success">成功按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
        <layout-footer></layout-footer>
    </div>
</template>

<script setup>
    import LayoutFooter from '@/components/LayoutFooter.vue'
</script>

<style scoped>

</style>

4、my/index.vue

<template>
    <div>
        个人中心
        <layout-footer></layout-footer>
    </div>
</template>

<script setup>
    import LayoutFooter from '@/components/LayoutFooter.vue'
</script>

5、效果如下：