用vue2写一个分类页面,类似动态路由
时间: 2023-07-20 18:06:42 浏览: 49
好的,下面是一个简单的示例:
首先,需要在路由中定义一个动态路由:
```
{
path: '/category/:id',
name: 'Category',
component: Category,
props: true
}
```
然后,在组件中,可以通过 `$route.params.id` 获取到动态路由中的 id 参数,从而根据不同的 id 显示不同的分类页面内容。
Category.vue 示例代码如下:
```
<template>
<div>
<h1>{{ category.title }}</h1>
<ul>
<li v-for="item in category.items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true
}
},
data() {
return {
category: {}
}
},
created() {
this.getCategory(this.id)
},
methods: {
getCategory(id) {
// 发送请求获取分类数据
// 示例代码,实际应该根据后端接口进行调用
this.category = {
title: `分类${id}`,
items: [
{ id: 1, name: 'item 1' },
{ id: 2, name: 'item 2' },
{ id: 3, name: 'item 3' }
]
}
}
}
}
</script>
```
这样就可以根据不同的 id 显示不同的分类页面内容了。