vue如何实现在当前页面嵌套页面展示商品列表

要在Vue中实现在当前页面嵌套页面展示商品列表，你可以使用Vue的路由功能和组件。以下是一种实现方式：

1. 首先，确保你已经安装了Vue Router。如果没有安装，可以使用以下命令进行安装：

npm install vue-router

2. 在你的Vue项目中创建一个用于展示商品列表的组件，例如 `ProductList.vue`。

3. 在你的项目中创建一个路由文件，例如 `router.js`。在该文件中，导入Vue和Vue Router，并创建一个新的路由实例。

import Vue from 'vue';
import VueRouter from 'vue-router';
import ProductList from './components/ProductList.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/product-list',
    component: ProductList
  }
];

const router = new VueRouter({
  routes
});

export default router;

4. 在你的主Vue实例中，导入路由文件，并将其挂载到Vue实例中。

import Vue from 'vue';
import router from './router';

new Vue({
  router,
  // ...
}).$mount('#app');

5. 在你希望展示商品列表的页面中，使用 `<router-view>` 标签来显示嵌套的商品列表组件。

<template>
  <div>
    <!-- 其他页面内容 -->
    <router-view></router-view>
  </div>
</template>

这样，当你访问 `/product-list` 路径时，商品列表组件 (`ProductList.vue`) 将会被渲染在当前页面中的 `<router-view>` 标签中。

请注意，以上只是一种实现方式，你可以根据自己的需求进行适当的修改和调整。希望对你有帮助！