vue3实现三级页面跳转

Vue3可以通过vue-router实现三级页面跳转。具体实现方式如下：

1. 首先需要安装vue-router，可以通过npm进行安装：`npm install vue-router`

2. 在Vue的入口文件中引入vue-router并注册：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import Category from './views/Category.vue'
import Product from './views/Product.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/category',
    name: 'Category',
    component: Category
  },
  {
    path: '/product/:id',
    name: 'Product',
    component: Product
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

这里我们定义了三个路由：首页、分类页和商品详情页。其中商品详情页的路由中包含了一个参数id，用于显示不同的商品详情。

3. 在Vue组件中使用路由跳转：

<template>
  <div>
    <h1>分类页</h1>
    <ul>
      <li v-for="item in categoryList" :key="item.id">
        <router-link :to="{name:'Product',params:{id:item.id}}">{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [
        { id: 1, name: '商品1' },
        { id: 2, name: '商品2' },
        { id: 3, name: '商品3' }
      ]
    }
  }
}
</script>

这里我们在分类页中使用了`router-link`组件来跳转到商品详情页，通过`:to`属性设置路由的名称以及参数id。

4. 在商品详情页中获取参数并显示对应的内容：

<template>
  <div>
    <h1>商品详情页</h1>
    <p>{{product.name}}</p>
    <p>{{product.desc}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {}
    }
  },
  created() {
    const productId = this.$route.params.id
    // 根据productId获取商品详情，并将数据赋值给product
    this.product = { id: productId, name: '商品' + productId, desc: '这是商品' + productId + '的描述' }
  }
}
</script>

这里我们通过`this.$route.params.id`获取到路由中的参数id，并根据该参数获取对应的商品详情数据，并将数据赋值给`product`。