目次
(1) ルーティング構成を変更します。主に、router の下の index.js の path 属性に :id のようなプレースホルダーを追加します。
(1) ルーター配下の index.js の routing 属性に props: true 属性を追加することを中心に、ルーティング設定を変更します。
(3) Profile.vue でパラメーターを受け取り、ターゲット コンポーネントに props 属性を追加します。
(1) router/index.js にリダイレクトパスを設定する
1. パラメータの受け渡し
方法1
(1) ルーティング構成を変更します。主に、router の下の index.js の path 属性に :id のようなプレースホルダーを追加します。
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile
}
(2) ビューレイヤーがパラメータを渡す
<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
説明します:
このとき、この属性をオブジェクトとして使用するために、Main.vue の route-link 位置の to を to: to に変更しました. router-link の name 属性 name は、name 属性の name と一致する必要があることに注意してくださいroute. このため、Vue は対応するルーティング パスを見つけることができます。
(3)受信パラメータ
<template>
<!-- 所有的元素必须在根节点下-->
<div>
<h1>个人信息</h1>
{
{$route.params.id}}
</div>
</template>
説明します:
すべての要素はルート ノードの下にある必要があります。そうでない場合、エラーが報告されます
(4) テスト
方法 2 (小道具を使用してカップリングを減らす)
(1) ルーター配下の index.js の routing 属性に props: true 属性を追加することを中心に、ルーティング設定を変更します。
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile,
props: true
}
(2) パラメータの受け渡しは従来通り
<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
(3) Profile.vue でパラメーターを受け取り、ターゲット コンポーネントに props 属性を追加します。
<template>
<div>
个人信息
{
{ id }}
</div>
</template>
<script>
export default {
props: ['id'],
name: "UserProfile"
}
</script>
<style scoped>
</style>
(4) テスト
2.リダイレクト
Vue でのリダイレクトは、パスが異なるがコンポーネントが同じ場合に機能します
(1) router/index.js にリダイレクトパスを設定する
{
path: '/main',
name: 'Main',
component: Main
},
{
path: '/goHome',
redirect: '/main'
}
(2) 閲覧数の増加
<el-menu-item index="1-3">
<!--插入的地方-->
<router-link to="/goHome">返回首页</router-link>
</el-menu-item>