LINUX.ORG.RU

Как в vue-router шарить компонент между роутами?

 , , , ,


0

1

Как можно в component в vue-router, передать один и тот же компонент, что бы
это были новые компоненты, а не один и тот же?

Т.е. что бы было не так:

https://jsfiddle.net/3a08gey9/ (Один компонент на роут)

А как-то вот так:

https://jsfiddle.net/xxro1043/ (Разные компоненты на роут)

Но без костылей в виде Test1, Test2?

Ответ на: комментарий от menangen

Посмотрел, спасибо.
Но не совсем понимаю как это мне поможет.
Там в примере, через dynamic-components заружаются
разные компоненты. А мне надо переиспользовать один и тот же.

pru-mike ★★ ()

Могу предложить разве что развить вашу идею
jsFiddle

soal ()
Ответ на: комментарий от pru-mike

Ну, а мне, например, не очень понятна фраза: «один и тот же компонент, чтобы это были новые компоненты ». Я здесь часто читаю такие фразы (на лоре), что у меня мозг выворачивается.

menangen ★★★★★ ()
Ответ на: комментарий от menangen

Да, я наверное неудачно выразился. Надеялся что будет понятней из примера.
Попробую пояснить

Если Test это что-то вроде:

<template>
  <div>
    <p><input v-model="msg"/></p>
    <p>{{ msg }}</p>
  </div>
</template>

То вот если делать вот так:

import Test from '@/components/Test'

const router = new VueRouter({
  routes: [{
    path: '/aaa',
    name: 'AAA',
    component: Test,
  }, {
    path: '/bbb',
    name: 'BBB',
    component: Test,
  }, ],
});

Тогда если включить /aaa и написать что-нибудь в input,
потому переключится в /bbb, то значение msg не сбросится,
а останется таким каким было заполнено в /aaa

А если сделать вот так:

import Test from '@/components/Test'

Vue.component('Test', Test);

const Test1 = { template: '<Test/>' }
const Test2 = { template: '<Test/>' }

const router = new VueRouter({
  routes: [{
    path: '/aaa',
    name: 'AAA',
    component: Test1,
  }, {
    path: '/bbb',
    name: 'BBB',
    component: Test2,
  }, ],
});

То сообщение будет сбрасываться.

Вопрос есть-ли способ сказать VueRouter что он должен (ээээ, тут не знаю как лучше выразиться) использовать «новый» компонент?

pru-mike ★★ ()
Ответ на: комментарий от pru-mike

Тогда если включить /aaa и написать что-нибудь в input,
потому переключится в /bbb, то значение msg не сбросится, а останется таким каким было заполнено в /aaa

Так это у тебя компонент кривой. Стейт не должен шариться внутри, а должен передаваться как параметр.

no-such-file ★★★★★ ()
Последнее исправление: no-such-file (всего исправлений: 1)
Ответ на: комментарий от no-such-file

Да обычный вроде компонент.
«msg» в данному случае это как раз внутреннее свойство,
c теми свойствами которые передаются из вне такой проблемы нет.
Насколько я понимаю, в случае [1] получается,
что роуты указывают на один и тот же компонент.

pru-mike ★★ ()

Используй для этого Vuex, или что там похожее на Redux есть в Vue, - просто не возникнет такого вопроса

anonymous ()

Повторное использование уже созданных компонентов - это одна из основных фишек vue-router.

По теме: :key в помощь.

<router-view :key="$route.fullPath"/> 


https://jsfiddle.net/5ufydceL/

blackst0ne ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.