在构建项目时，创建了提问题的路由/question/create，映射了一个CreateQuestion组件
{
path: '/question',
component: HomeLayout,
children: [
{
path: '',
component: QuestionList
},
{
path: 'create',
component: CreateQuestion
},
{
path: ':id',
component: ShowQuestion
}
]
},
安装markdown组件
本文将使用vue-meditor库，来实现提交问题时，可以提交markdown语法内容，安装命令
npm i -S vue-meditor
编辑提问页面
编辑文件src/views/CreateQuestion
<template>
<div class="container">
<Alert :msg=toastMsg></Alert>
<b-form @submit="onSubmit">
<b-form-group>
<b-form-input
id="input-1"
v-model="title"
type="text"
placeholder="请输入标题"
required
></b-form-input>
</b-form-group>
<b-form-group>
<Markdown v-model="content"></Markdown>
</b-form-group>
<b-button type="submit" variant="success">发布问题</b-button>
</b-form>
</div>
</template>
<script>
import Markdown from 'vue-meditor'
import { createQuestion } from '../api/question'
import Alert from '../components/Alert'
export default {
name: 'CreateQuestion',
data() {
return {
title: '',
content: '',
toastMsg: ''
}
},
components: {
Alert,
Markdown
},
methods: {
onSubmit(event) {
event.preventDefault()
createQuestion({
title: this.title,
content: this.content
}).then(res => {
if (res.code === 0) {
this.$router.push('/')
}
if (res.code === -10001) {
this.$router.push('/user/login')
}
this.toastMsg = res.msg
})
},
}
}
</script>
<style scoped>
.container {
width: 60%;
}
</style>