web-dev-qa-db-ja.com

プログラムナビゲーションVue.jsで小道具を渡す

「title」という名前のプロップを持つVueコンポーネントがあります。例：

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

編集：

提案どおり、ルートを次のように変更しました。

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

そして、次へのナビゲーション：

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

ただし、画像コンポーネント（テンプレート-以下を参照）にはタイトルが表示されません。

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

問題を引き起こす可能性のあるものはありますか？

javascriptvue.jsvuejs2vue-router
19
Ashley B

Paramsを使用します。

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

注：nameを指定する必要があります。 pathを使用してthis.$router.Pushを呼び出した場合、これは機能しません。

そして、小道具としてパラメーターを受け入れるようにルートを設定します。

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

props: trueは ここに記載 です。

49
Bert

Vue-routerのドキュメントでは、paramsはパスではなく名前でのみ機能することが明記されています。

// 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

パスを使用する場合は、パス自体にパラメーターを渡すか、以下に示すようにクエリを使用します。

router.Push({ path: `/user/${userId}` }) // -> /user/123

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