1.路由配置

router/index.js

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

import Login from '@/views/Login/index.vue'

import Layout from '@/views/Layout/index.vue'

import Home from '@/views/Home/index.vue'

import Category from '@/views/Category/index.vue'

const router = createRouter({

history: createWebHistory(import.meta.env.BASE_URL),

routes: [

{

path: '/',

component: Layout,

children: [

{

path: '',

component: Home

},

{

path: 'category/:id',

component: Category

}

]

},

{

// path: '/login',

// component: Login

}

]

})

export default router

2.页面导航添加地址

<li class="home" v-for="item in categoryStore.categoryList" :key="item.id">

<RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>

</li>

--- 面包屑导航渲染

1.添加api

import request from '@/utils/http'

export function getCategoryAPI (id) {

return request({

url: '/category',

params: {

id

}

})

}

2.Category/index.vue

<!-- 面包屑 -->

<div class="bread-container">

<el-breadcrumb separator=">">

<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

<el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>

</el-breadcrumb>

</div>

// 封装分类数据业务相关代码

import { onMounted, ref } from 'vue'

import { getCategoryAPI } from '@/apis/category'

import { useRoute } from 'vue-router'

import { onBeforeRouteUpdate } from 'vue-router'

export function useCategory () {

// 获取分类数据

const categoryData = ref({})

const route = useRoute()

const getCategory = async (id = route.params.id) => {

const res = await getCategoryAPI(id)

categoryData.value = res.result

}

onMounted(() => getCategory())

// 目标:路由参数变化的时候 可以把分类数据接口重新发送

onBeforeRouteUpdate((to) => {

// 存在问题：使用最新的路由参数请求最新的分类数据

getCategory(to.params.id)

})

return {

categoryData

}

}

3.获取地址参数

import { useRoute } from 'vue-router'

const route = useRoute()

const getCategory = async (id = route.params.id) => {

const res = await getCategoryAPI(id)

categoryData.value = res.result

}

---- 轮播图功能实现

// 获取banner

export function getBannerAPI (params = {}) {

// 默认为1 商品为2

const { distributionSite = '1' } = params

return httpInstance({

url: '/home/banner',

params: {

distributionSite

}

})

}

// userBanner.js

// 封装banner轮播图相关的业务代码

import { ref, onMounted } from 'vue'

import { getBannerAPI } from '@/apis/home'

export function useBanner () {

const bannerList = ref([])

const getBanner = async () => {

const res = await getBannerAPI({

distributionSite: '2'

})

console.log(res)

bannerList.value = res.result

}

onMounted(() => getBanner())

return {

bannerList

}

}

----- 激活状态显示和分类列表渲染

<RouterLink active-class="active" :to="`/category/${item.id}`">

{{ item.name }}

</RouterLink>

将 active-class="active" 添加至RouterLink即可

-- 解决路由缓存问题

<template>

<LayoutFixed />

<LayoutNav />

<LayoutHeader />

<!-- 添加key 破坏复用机制 强制销毁重建 -->

<RouterView :key="$route.fullPath" />

<LayoutFooter />

</template>

// 封装分类数据业务相关代码

import { onMounted, ref } from 'vue'

import { getCategoryAPI } from '@/apis/category'

import { useRoute } from 'vue-router'

import { onBeforeRouteUpdate } from 'vue-router'

export function useCategory () {

// 获取分类数据

const categoryData = ref({})

const route = useRoute()

const getCategory = async (id = route.params.id) => {

const res = await getCategoryAPI(id)

categoryData.value = res.result

}

onMounted(() => getCategory())

// 目标:路由参数变化的时候 可以把分类数据接口重新发送

onBeforeRouteUpdate((to) => {

// 存在问题：使用最新的路由参数请求最新的分类数据

getCategory(to.params.id)

})

return {

categoryData

}

}

// index.vue中引入如下

const { categoryData } = useCategory()