vueルーティングの方法

1125 ワード

シナリオ1:
getdata(id){//r o u t e r.p u s hを直接呼び出して携帯パラメータのジャンプを実現t h i s.router.push携帯パラメータのジャンプを実現this.router.push携帯パラメータのジャンプを実現this.router.push({path:/list/${id},})
シナリオ1では、{path:'/describe/:id',name:'Describe',component:Describe}がpathに/:idを追加する$routerに対応する必要がある.pushにpathが携帯するパラメータ.サブアセンブリでは、渡されたパラメータ値を取得するために使用できます.
this.$route.params.id
シナリオ2:
親コンポーネント:ルーティング属性のnameによって一致するルーティングを決定し、paramsによってパラメータを渡す
this.$router.push({ name: ‘Describe’, params: { id: id } })
対応するルーティング構成:親コンポーネントでparamsがパラメータを運ぶために使用されているため、ここでは:/idを使用してパラメータを渡すことはできません.
{ path: ‘/describe’, name: ‘Describe’, component: Describe }
サブアセンブリ:パラメータを取得する
this.$route.params.id
シナリオ3:
親コンポーネント:pathを使用してルーティングをマッチングし、queryを介してパラメータを渡す場合、queryが渡すパラメータはurlの後ろに表示されますか?id=?
this.$router.push({ path: ‘/describe’, query: { id: id } })
対応するルーティング構成:
{ path: ‘/describe’, name: ‘Describe’, component: Describe }
対応サブコンポーネント:パラメータを取得するには
this.$route.query.id
ここで、サブコンポーネントでパラメータを取得する場合は$routeであることに特に注意する.$routerではなくparams
一般的には3種類目をお勧めします