Необязательный параметр на Vue Router - PullRequest
Новая
       32

Необязательный параметр на Vue Router

1 голос
/ 24 апреля 2019

Итак, у меня есть страница проекта, и когда я нажимаю на один проект, я хочу перейти на страницу сведений о проекте этого проекта.поэтому я использую динамические маршруты.Я передаю в качестве параметров имя (которое будет отображаться в URL) и Id (который я использую для перехода в мой магазин и получения проекта, этот Id не отображается в URL).Все в порядке, проблема в том, что когда я загружаю браузер внутри страницы сведений о проекте, я получаю только имя в качестве параметра и не могу получить идентификатор, так что я не могу сопоставить идентификатор с моим vuex, потому что нет идентификатора.

это моя ссылка маршрутизатора на родительском 

<router-link class="project__icon" :project="project" :to="{ name: 'projectDetail', params: {name: project.name.replace(' ', ''), id: project.id} }">

, и это то, что я делаю на другой странице, чтобы получить идентификатор проекта внутри Vuex 

const projectId = this.$route.params.id; 
    this.project = this.$store.getters.getProject(projectId);

Это то, что яполучить, когда я нажимаю на маршрутизатор 

http://localhost:8080/project/myprojectName

В моем файле маршрутизатора у меня есть это 

{
 path: '/project/:name',
 name: 'projectDetail',
 component: ProjectDetail,
},

1 Ответ

0 голосов
/ 24 апреля 2019

Я не уверен, почему вы привязываете project к router-link, в этом нет необходимости. 

<router-link class="project__icon" :to="{ name: 'projectDetail', params: {name: project.name.replace(' ', ''), id: project.id} }">

Вам необходимо добавить :id в качестве параметра к вашему маршруту.Вы можете пометить его как необязательный с помощью ?. 

{
 path: '/project/:name/:id?',
 name: 'projectDetail',
 component: ProjectDetail,
}

Кроме того, если вы установите props: true, вы можете отделить свой компонент от маршрутизатора и вместо использования this.$route.params.id ваш компонент детализации получитпараметры как реквизиты. 

{
 path: '/project/:name/:id?',
 name: 'projectDetail',
 component: ProjectDetail,
 props: true,
}

РЕДАКТИРОВАТЬ: вы должны иметь идентификатор в URL, если вы хотите разрешить обновление и по-прежнему сохранить идентификатор, или вы должны хранить его где-то как localstorage или sessionstorage.

...