VUEのコンポーネントジャンプを実装する方法

VUEにコンポーネントジャンプを実装するには、次の方法があります。Router-Linkとコンポーネントを使用して、ターゲットパスとして属性を指定します。 コンポーネントを使用して、現在ルーティングされているレンダリングされているコンポーネントを表示します。プログラマティックナビゲーションには、router.push（）およびrouter.replace（）メソッドを使用します。前者は歴史を保存し、後者は記録を残さずに現在のルートに取って代わります。

VUEにコンポーネントジャンプを実装します

VUEにコンポーネントジャンプを実装する方法はたくさんあります。最も一般的な方法はrouter-linkと<router-view></router-view>コンポーネントを使用することです。

1. router-linkを使用します

router-linkコンポーネントは、クリックするとルーティングジャンプをトリガーするハイパーリンクです。基本的な使用法は次のとおりです。

 <code><router-link :to="'/path/to'">跳转到页面</router-link></code>

場所:toジャンプするターゲットパスを指定します。

2。 <router-view></router-view>を使用します

<router-view></router-view>コンポーネントは、現在ルーティングされているレンダリングを表示する特別なコンポーネントです。ジャンプにrouter-linkを使用する場合、 <router-view></router-view>対応するコンポーネントを自動的にレンダリングします。

3。router.push router.push()とrouter.replace()を使用します

router.push()およびrouter.replace()メソッドもコンポーネントジャンプを実装できますが、通常はプログラマティックナビゲーションに使用されます。 router.push()新しいルートを履歴スタックに押し込み、 router.replace()は現在のルートを置き換え、履歴を離れません。

使用の例

以下はrouter-linkと<router-view></router-view>を使用してコンポーネントジャンプを実装する例です。

 <code>// 路由配置const routes = [ { path: '/about', component: About } ]; const router = new VueRouter({ routes }); // 根组件const App = { template: ` <div> <router-link :to="/about">About</router-link> <router-view></router-view> </div> `, router }; const app = new Vue({ el: '#app', router, components: { App } });</code>

この例では、 router-linkルート/aboutのジャンプをトリガーし、 <router-view></router-view>はAboutコンポーネントをレンダリングします。

以上がVUEのコンポーネントジャンプを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。