Vue のルーティング ジャンプの問題をまとめたサンプル チュートリアル

この記事では主にVueroutingjumpの問題記録の詳細な解説を紹介していますが、編集者が非常に良い内容だと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう

最近、プロジェクトでアプリを作成するために Vue を使用する必要があります。Vue でルーティングを使用するときに次の問題が発生しました。

ルーティング設定は次のとおりです:

{

path:'/tab',

component:Tab,

children:[{

path:'layoutList',

name:'LayoutList',

component:LayoutList

},{

path:'layoutView/:layoutId',

name:'LayoutView',

component:LayoutView

},{

path:'layoutDetail/:viewId',

name:'LayoutDetail',

component:LayoutDetail

}]

}

ここで、/tab は 3 つのサブアドレスを持つルート アドレスで、3 つのサブアドレス レベルは次のとおりです: LayoutList => LayoutView => LayoutDetail

通常の状況:現在のルートは/tab/layoutListです。LayoutViewページにジャンプする必要がある場合は、router.push({path:'layoutView/'+item.id})を使用できます

ジャンプ後のルートは/tab/layoutViewです/1

When I LayoutView ページから対応する LayoutDetail ページにジャンプしたい場合:

状況 1: (ページが見つかりません)

ジャンプ前のアドレス: /tab/layoutView/ 1

ジャンプコード: router.push({ path:'layoutDetail/'+item.id});

ジャンプ後のアドレス:/tab/layoutView/layoutDetail/27

ケース2: (ページが見つかりません)

ジャンプ前のアドレス:/tab /layoutView/1

ジャンプコード: router.push({path:'/layoutDetail/'+item.id});

ジャンプ後のアドレス:/layoutDetail/27

Case 3: (ページが見つかりません)

ジャンプ前のアドレス:/tab/layoutView/1

ジャンプコード: router.push({path:'tab/layoutDetail/'+item.id});

ジャンプ後のアドレス:/ tab/layoutView/tab/layoutDetail/27

ケース4：（ページは正常に表示されます）

ジャンプ前のアドレス：/tab/layoutView/1

ジャンプコード：router.push({path:' /tab /layoutDetail/'+item.id});

ジャンプ後のアドレス: /tab/layoutDetail/27

ケース4の操作を行うだけで正常にページが表示されます。

vue ルーティングは、プッシュのアドレスに基づいて行われます。アドレスが / で始まらない場合は、現在のルートの最後の / 以降のアドレスが直接置き換えられます。

アドレスが / で始まる場合は、プッシュのアドレスが使用されます。ジャンプする絶対アドレスとして使用されます。

さらに、router.go({name:'LayoutDetail',params:{viewId:item.id}})を使用してみましたが、ページはジャンプせず、アドレスも変わりません。

以上がVue のルーティング ジャンプの問題をまとめたサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。