Vue JS передает данные по ссылке на компонент

Question

внутри компонента У меня есть выбор входа. В зависимости от того, что было выбрано, вывод загрузки отображается.

<div class="form-group">
    <select class="custom-select" id="uploadType" v-model="uploadType">
        <option value="">Please select...</option>
        <option value="1">Image</option>
        <option value="2">PDF</option>
        <option value="3">Text</option>
    </select>
</div>
<div class="form-group" v-if="uploadType == '1'">
    <uploader :options="options" ref="uploader" file-success="fileSuccess" @file-error="fileError">
        <uploader-drop>
            <uploader-btn :attrs="attrs1" :single=true>select files</uploader-btn>
        </uploader-drop>
    </uploader>
</div>
<div class="form-group" v-if="uploadType == '2'">
    <uploader :options="options" ref="uploader" @file-success="fileSuccess" @file-error="fileError">
        <uploader-drop>
            <uploader-btn :attrs="attrs2" :multiple=true>select files</uploader-btn>
        </uploader-drop>
    </uploader>
</div>
<div class="form-group" v-if="uploadType == '3'">
    <uploader :options="options" ref="uploader" @file-success="fileSuccess" @file-error="fileError">
        <uploader-drop>
            <uploader-btn :attrs="attrs3" :single=true>select files</uploader-btn>
        </uploader-drop>
    </uploader>
</div>

<script>
    import uploader from 'vue-simple-uploader'

    export default {
        data() {
            return {
                uploadType: '',
                options: {
                    target: 'upload'
                },
                attrs1: {
                    accept: '.jpg'
                },
                attrs2: {
                    accept: '.pdf'
                },
                attrs3: {
                    accept: '.txt'
                }
            }
        },
        methods: {
            fileSuccess (rootFile, file, message) {
                console.log(message)
            },
            fileError (rootFile, file, message) {
                console.log(message)
            }
        }
    }
</script>

Теперь очевидно, что это грязно, я повторяю код, который не очень хорош. Кроме того, выбор больше не нужен. Вместо этого на другой странице у меня есть ссылки вроде

<router-link to="/uploadFile" tag="a" class="btn navbar-btn" exact>
    Upload Image
</router-link>

<router-link to="/uploadFile" tag="a" class="btn navbar-btn" exact>
    Upload PDF
</router-link>

<router-link to="/uploadFile" tag="a" class="btn navbar-btn" exact>
    Upload Text
</router-link>

Я хотел попробовать отправить тип (изображение, PDF или текст) по нажатой ссылке. Внутри компонента загрузки я мог бы как-то динамически установить это для uploadType. я мог бы Также необходимо сделать вторую загрузку разрешенной кратностью, а также изменить принятые типы.

Есть ли способ сделать это по ссылкам? Довольно сложно объяснить, но я пытаюсь сделать мой загружаемый компонент многоразовым. Мне почти нужно что-то вроде реквизита, но для ссылки?

Спасибо

Answer 1

Вы можете использовать $route.params, для получения дополнительной информации ознакомьтесь с документацией Vue router

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>