在 Vue 中，是否可以允许用户创建路由器链接？

Question

我正在使用 Vue 制作一个 CRUD 系统。到目前为止，我已经做到了，登录用户可以管理应用程序中的内容，例如添加/更新/删除文本和图像。 但是让我们假设用户想要创建一个按钮，并且该按钮需要链接到某个地方，比如链接到不同的组件。 这是如何实现的？

如果无法创建路由器链接，那么至少有什么方法可以让用户将正常的 url 地址添加到文本块中？

示例：

“输入链接名称”

“输入链接的 URL”

这就是我当前的代码的样子。我添加了一个 url 类型的输入字段，因为我相信这是我需要开始的地方，但我不知道从哪里开始。

<template>
<AdminNavbar/>
   <form @submit.prevent="handleSubmit">
      <h4>Create new content</h4>
      <input type="text" required placeholder="Insert title" v-model="cardTitle">
      <input type="text" required placeholder="Insert descriptiob" v-model="cardDescription">
      <label>Add a link:</label>
      <input type="url" v-model="cardLink">
      <label>Upload image</label>
      <input type="file" @change="handleChange">
      <div class="error">{{ fileError }}</div>
      <button v-if="!isPending">Create</button>
      <button v-else disabled>Saving...</button>
   </form>
</template>

<script>

import slugify from 'slugify'
import { ref } from 'vue'
import useStorage from '@/composables/useStorage'
import useCollection from '@/composables/useCollection'
import { timestamp } from '@/firebase/config'
import AdminNavbar from '@/components/AdminNavbar.vue'
import { useRouter } from 'vue-router' 

export default {

   components: {
      AdminNavbar
   },

    setup() {
       const slug = ref(null)
       const { filePath, url, uploadImage } = useStorage()
       const { error, addDoc } = useCollection('cards')
       const cardTitle = ref('')
       const cardDescription = ref('')
       const cardLink = ref('')
       const file = ref(null)
       const fileError = ref(null)
       const isPending = ref(false)
       const router = useRouter();

       const handleSubmit = async () => {
         if (cardTitle.value) {
             slug.value = slugify(cardTitle.value, {
                replacement: '-',
                remove: /[*+~.()'"!:@]/g,
                lower: true
             })
          }
          if (file.value) {
             isPending.value = true
             await uploadImage(file.value)
             await addDoc({
                slug: slug.value,
                cardTitle: cardTitle.value,
                cardDescription: cardDescription.value,
                cardLink: cardLink.value,
                cardImage: url.value,
                filePath: filePath.value,
                createdAt: timestamp()
             })
             isPending.value = false
             if(!error.value) {
                router.push({ name: "Home" })
             }
          }
       }

       // allowed file types

       const types = ['image/png', 'image/jpeg']

       const handleChange = (e) => {
          const selected = e.target.files[0]
          console.log(selected)

          if (selected && types.includes(selected.type)) {
             file.value = selected
             fileError.value = null 
          } else {
             file.value = null
             fileError.value = 'Please select an image of the type JPG or PNG'
          }
       }

       return {
          slug,
          cardTitle,
          cardDescription,
          cardLink,
          handleSubmit,
          handleChange,
          fileError,
          file,
          isPending
       }
    }
}
</script>

Answer 1

因此，您将创建一个接受 2 个参数的路由。示例：/images/{user}/{image-slug}。因此，现在链接图像时，此路由将路由到组件，您可以根据用户和 slug 加载图像。示例：http://example.com/images/1/imagename