vue3-新建组件

在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>

 里面展示了一个标签，标签进行了不重复并且不带空格的处理，如下：

现在没有添加样式