ホームページ > 記事 > ウェブフロントエンド > Vue.jsでルーターパラメータを渡す方法
今回は、Vue.jsでルーターパラメーターを渡す方法と、Vue.jsでルーターパラメーターを渡す際の注意点について説明します。以下は実際のケースです。
Vue-router パラメーターの受け渡し
ルーターでパラメーターを渡す必要がある理由
現在、ホームページ上で、項目の詳細情報を表示するには、項目をクリックする必要があります。このとき、トップページの詳細ページにアイテムのIDを渡す必要があり、詳細ページはIDを介して詳細情報を取得できます。
vue-routerパラメータの受け渡しメソッド
Parmaパラメータの受け渡し
投稿コード:
/router/index.vue
export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work', name: 'Work', component: Work } ] })
Component WorksはコンポーネントWork
/components/Home /に作業IDを渡します。 Comtent/Works.vue
// 触发它传递一个对象到组件Work getIt (id) { this.$router.push({ path: '/work', name: 'Work', params: { id: id } }) }
/components/Work/Index.vue
<template> <p class="work"> work: {{id}} </p> </template> <script> export default { name: 'Work', data () { return { id: this.$route.params.id //拿到id } } } </script>
実行中のスクリーンショット:
クエリパラメータ
クエリする上記のパラメータを変更します。のparmas と query の違い
query は URL を介してパラメータを渡し、常に URL に表示されます
parmas はパラメータを渡します。ページを更新すると、データがなく、取得したパラメータは保存できません。この記事では、ケースメソッドをマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
React アプリケーション開発のスキャフォールディングのユースケース以上がVue.jsでルーターパラメータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。