프로그램 내비게이션이 있는 패스 소품 Vue.js

프로그램 내비게이션이 있는 패스 소품 Vue.js

Vue 컴포넌트에 'title'이라는 이름의 소품이 있습니다.예:

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

특정 작업이 완료된 후 프로그래밍 방식으로 구성 요소를 탐색합니다.프로펠러 값을 설정하면서 사용자를 프로그래밍 방식으로 라우팅할 수 있는 방법이 있습니까?다음과 같은 링크를 만들 수 있습니다.

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

하지만 다음과 같은 방법이 있을까요?

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

편집:

제안대로 루트를 다음과 같이 변경했습니다.

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

그리고 다음 네비게이션:

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

그러나 내 이미지 구성 요소(템플릿 - 아래 참조)에는 여전히 제목이 표시되지 않습니다.

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

문제의 원인이 될 만한 것이 있습니까?

매개 변수를 사용합니다.

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

주의: 다음을 지정해야 합니다.name이 조작은, 전화하면 동작하지 않습니다.this.$router.push사용.path.

그리고 패러햄을 소품으로 받아들이도록 경로를 설정합니다.

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

props: true는 여기에 기재되어 있습니다.

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' }})

라우터에 정의되어 있는 자녀 루트에서 같은 문제가 발생.다음 router.displays는 이름 있는 에 매핑된 자녀 루트를 보여줍니다.

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

router.displaces

    {
      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
          }
      )

언급URL : https://stackoverflow.com/questions/45151810/passing-props-with-programmatic-navigation-vue-js