在views中新建一个组件Create.vue,如下:
<script setup>
</script>
<template>
<div>创建博客</div>
</template>
<style scoped>
</style>
然后在index.js中配置这个路由,如下:
import {createRouter,createWebHistory} from "vue-router";
import Home from "../views/Home.vue";
import Details from "../views/Details.vue";
import Create from "../views/Create.vue";
const routes=[
{path:"/",name:"Home",component:Home},
{path:"/posts/:id",name:"Details",component:Details,props:true},
{path:"/create",name:"Create",component:Create},
];
const router=createRouter({
history:createWebHistory(),
routes
})
export default router;
在Navbar.vue这个导航组件中也使用了这个create路由,如下:
<script setup>
</script>
<template>
<header>
<h1>个人博客</h1>
<nav>
<!--<router-link :to="{name:'Home'}">首页</router-link>-->
<!--下边这种方式也可以-->
<router-link to="/">首页</router-link>
<router-link to="/create">新建</router-link>
</nav>
</header>
</template>
<style scoped>
</style>
这样点击新建就可以看到这个新建页面了,效果如下:
下面进行一个表单的设计,Create.vue如下:
<script setup>
import {ref} from "vue";
const title=ref("");
const body=ref("");
const tags=ref([]);
const tag=ref("");
const handleKeydown=()=>{
//存放不重复的并且不带空格的标签
if(!tags.value.includes(tag.value)){
tag.value=tag.value.replace(/\s/g,'');
tags.value.push(tag.value);
}
tag.value="";
}
</script>
<template>
<div class="create">
<form>
<label for="title">标题</label>
<input type="text" v-model="title" required />
<label for="body">内容</label>
<textarea v-model="body" />
<label for="tag">标签(回车添加标签)</label>
<input type="text" v-model="tag" @keydown.enter.prevent="handleKeydown"/>
<!--显示标签-->
<div v-for="tag in tags" :key="tag" class="pill">#{{tag}}</div>
<button>添加</button>
</form>
</div>
</template>
<style scoped>
</style>
里面展示了一个标签,标签进行了不重复并且不带空格的处理,如下:
现在没有添加样式