(vue router) Есть ли способ не дублировать код при создании двух маршрутов с почти идентичным представлением?
У меня есть компонент NewArticleView vue, который сопоставлен с /articles/new, например:
const routes = [
...
{
path: '/articles/new',
name: 'New Article',
component: NewArticleView
},
...
]
Представление — это просто форма.
Я хочу создать компонент EditArticleView, но мне кажется неправильным создавать новый компонент, так как он будет почти идентичен NewArticleView.
Мне бы очень хотелось, чтобы был способ отправить флаг edit или что-то в этом роде при навигации по маршруту (что-то вроде router.push('/articles/new', editArticle=true)), который изменяет поведение компонента. Например, привязать значения формы к статье, которую я хочу отредактировать, вместо пустой формы, и использовать вызов API обновления вместо того, который используется для создания новой статьи.
Есть ли аккуратный способ сделать это?
Ответы 1
Вы можете создать один компонент, например ArticleView, который принимает реквизит с именем editArticle:
{
path: '/articles/new',
name: 'ArticleView',
component: NewArticleView,
props: route => ({ editArticle: route.query.editArticle})
},
затем используйте его как /articles/new?editArticle=true
Примечание: как вы думаете, семантически имеет больше смысла называть маршрут /articles/update с флагом newArticle?
Назовите свой компонент именем, которое не сбивает с толку, например ArticleForm, и передайте идентификатор статьи в качестве параметра, например path: '/articles/:id', затем внутри компонента вы можете получить использование this.$route.params.id
вы можете сделать вызов API внутри смонтированного хука, но это должно быть сделано с помощью сервиса, подобного этому stackoverflow.com/questions/63693060/…
Это именно то, что я искал! Использование запроса очень умно. Как вы думаете, это хороший способ передать идентификатор статьи, которую я хочу отредактировать, в виде запроса? И как вы думаете, как лучше всего связать данные формы с соответствующими данными статьи? Есть ли способ избежать вызова API, может быть, загрузить его из глобального состояния с помощью vuex?