今回は、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
}
]
})// 触发它传递一个对象到组件Work
getIt (id) {
this.$router.push({
path: '/work',
name: 'Work',
params: {
id: id
}
})
}<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 サイトの他の関連記事に注目してください。 推奨書籍:Angular+Font-Awesome 手順の詳細な説明
js および typescript でのクラスの使用方法の詳細な説明
以上がVue.jsでルーターにパラメータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
