做两个html页面,一个是发布活动,一个是活动详情。用 router-link实现两个页面的跳转
时间: 2023-05-11 13:02:17 浏览: 83
好的,这是一个很简单的问题。你可以使用 Vue.js 和 Vue Router 来实现这个功能。首先,你需要创建两个组件,一个是发布活动组件,另一个是活动详情组件。然后,你需要在 Vue Router 中定义两个路由,一个是发布活动路由,另一个是活动详情路由。最后,你可以使用 router-link 组件来实现两个页面之间的跳转。以下是一个简单的示例代码:
发布活动组件:
<template>
<div>
<h1>发布活动</h1>
<!-- 这里是发布活动表单 -->
</div>
</template>
<script>
export default {
name: 'PublishActivity'
}
</script>
活动详情组件:
<template>
<div>
<h1>活动详情</h1>
<!-- 这里是活动详情内容 -->
</div>
</template>
<script>
export default {
name: 'ActivityDetail'
}
</script>
Vue Router 配置:
import Vue from 'vue'
import Router from 'vue-router'
import PublishActivity from '@/components/PublishActivity'
import ActivityDetail from '@/components/ActivityDetail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/publish',
name: 'PublishActivity',
component: PublishActivity
},
{
path: '/activity/:id',
name: 'ActivityDetail',
component: ActivityDetail
}
]
})
router-link 组件使用:
<router-link to="/publish">发布活动</router-link>
<router-link :to="{ name: 'ActivityDetail', params: { id: 123 }}">查看活动详情</router-link>
这样,你就可以实现两个页面之间的跳转了。
阅读全文