vue点击后展示详情页
时间: 2023-10-01 15:03:50 浏览: 36
要实现点击后展示详情页,你可以使用Vue中的路由功能来实现。
首先,在 Vue 项目中安装 `vue-router`,可以使用 npm 命令进行安装:
```
npm install vue-router --save
```
然后在项目的 `main.js` 文件中导入和使用 `vue-router`:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
在路由配置中,我们定义了两个路由,一个是根路由 `'/'`,对应的是首页组件 `Home`,另一个是详情页路由 `'/detail/:id'`,对应的是详情页组件 `Detail`。
在页面中,我们可以使用 `<router-link>` 标签来生成链接,例如:
```html
<router-link :to="{ name: 'Detail', params: { id: 123 } }">查看详情</router-link>
```
这个链接会跳转到 `/detail/123` 路径,其中 `123` 是详情页的参数。
在详情页组件 `Detail` 中,我们可以通过 `$route.params` 来获取路由参数,例如:
```javascript
export default {
name: 'Detail',
data () {
return {
id: this.$route.params.id
}
}
}
```
这样就可以根据参数展示对应的详情页了。