Передача реквизита с программной навигацией Vue.js

У меня есть компонент Vue, у которого есть указатель с названием 'title', например:

<script>
export default {
  props: ['title'],
  data() {
    return {
    }
  }
}
</script>

Я перехожу к компоненту программно после завершения определенного действия. Есть ли способ программно маршрутизировать пользователя, одновременно устанавливая значение prop? Я знаю, что вы можете создать ссылку вроде этого:

<router-link to="/foo" title="example title">link</router-link>

Однако есть ли способ сделать что-то вроде следующего?

this.$router.push({ path: '/foo', title: 'test title' })

EDIT:

Как я уже сказал, я изменил свой маршрут на следующее:

   {
      path: '/i/:imageID',
      component: Image,
      props: true
    }

И переход к следующему:

this.$router.push({ path: '/i/15', params: {title: 'test title' }})

Однако мой компонент изображения (шаблон - см. ниже) по-прежнему не имеет названия.

<h1>{{ title}}</h1>

Есть ли что-то, что может вызвать проблемы?

Ответы

Ответ 1

Использовать параметры.

this.$router.push({ name: 'foo', params: {title: 'test title' }})

Примечание. Вы должны указать name. Это не работает, если вы вызываете this.$router.push с помощью path.

И установите маршрут для приема параметров как реквизитов.

{path: "/foo", name:"foo", component: FooComponent,  props: true}

props: true задокументирован здесь.

Ответ 2

Документы vue-router четко указывают, что params работает только с name, а не с path.

// set  props: true in your route definition
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
// This will NOT work
router.push({ path: '/user', params: { userId }}) // -> /user

Если вы используете path, передайте параметры в самом пути или используйте query, как показано ниже:

router.push({ path: '/user/${userId}' }) // -> /user/123

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

Ответ 3

Встречается та же проблема с дочерними маршрутами, определенными в роутере. Ниже на router.js показаны дочерние маршруты, сопоставленные с именованным

<router-view name="create"></router-view>
<router-view name="dashboard"></router-view>

router.js

    {
      path: "/job",
      name: "Job",
      component: () => import("./views/JobPage"),
      children: [
        {
          path: "create",
          name: "JobCreate",
          components: {
            create: JobCreate
          }
        },
        {
          path: ":id",
          name: JobConsole,
          components: {
            dashboard: JobConsole
          }
        }
      ]
    },

Когда я пытаюсь передать реквизиты из create, vue-router не удается получить динамическое соответствие маршрута, необходимое для JobConsole:

      this.$router.push(
        {
          name: "Job",
          params: {
            id: this.ID_From_JobCreate
          }
      )