VueRouter实现多个页面

    引入步骤：

        路由：

安装VueRouter：npm install vue-router-S

设置路由规则

配置路由规则

设置切换后的显示位置

在模板中实现路由跳转

params---通过路由规则传值

query---通过检索传值

轮播图接口数据获取：

        1.阅读接口文档

        2.配置接口地址

        3.使用axios获取数据

        4.将数据设置到模型层

（1）配置系统模块接口：

        在trip-client----utils---apis.js中           

 /**

              *存放项目中所有的接口地址    

                const apiHost = '/api'

              /**

                *用户账户相关的接口

                */

                const AccountsApis = {

                                loginUrl:'/',

                                logoutUrl:''

                }

        /**

              *系统模块相关的接口

               */

               const SystemApis = {

                        sliderListUrl:apiHost+'/system/slider/list'

                }

        export{

                AccountsApis,

                SystemApis

              }

2.配置前端跨域

在src--vite.config.js     

import {fileURLToPath,URL}from 'node:url'
import {defineConfig} from 'vite'
import vue from '@/vitejs/plugin-vue'
export default defineConfig({
    plugins:[
        vue(),
    ],
    resolve:{
        alias:{
            '@':fileURLToPath(new URL('.src/',import.meta.url))
            }
},
server:{
    proxy:{
        '/api':{
            target:'http://localhost:8000',
            changeOrign:true,
            rewriter:(path)=>path.replace(/^\/api/,''),
        }
    }
},

})

3.配置服务端媒体地址

在trip-server---setting.py

STATIC_URL= 'static/'
MEDIA_URL='http://localhost:5173/'

4.Banner.vue获取动态数据

<script setup>
 import {onMounted,ref} from 'vue'
import {ajax} from '@/utils/ajax/'
import {SystemApis} from '@/utils/apis';
const bannerList = ref()
const getBannerList=()=>{
    const res=sjax.get(SystemApis.sliderListUrl).then(res=>{
        bannerList.value=res.data.objects
})
}
</script>
<template>
    <div class="home-banner-box">
        <van-swipe-class="my-swipe":autoplay="3000"indicator="white">
            <van-swipe-item v-for="item in bannerList" :key="item.id">
                <img :src="item.img_url" alt="">
            </van-swipe-item>
        </van-swipe-banner-box>
    </div>
</template>

5.页面效果

二.景点列表接口数据获取（接口联调）

        1.阅读接口文档

        2.配置接口地址

        3.使用axios获取数据信息

        4.将数据设置到模型层

（1）配置接口地址

        在utils----api.js中

/**
*存放项目中所有的接口地址
*/
const apiHost = '/api'
/**
*用户账户相关接口
*/
const AccountApis={}
/**
*系统模块相关接口
*/
const SystemApis={}
/**
*景点模块相关接口
*/
const SightApis={
    sightListUrl:apiHost+'/sight/sight/list/'
}
export{
    AccountsApis,
    SystemApis,
    SightApis
}

2.使用axios获取热门数据

在src--home--Hot.vue文件    

3.使用axios获取数据--精选景点