ホームページ > 記事 > ウェブフロントエンド > ルート ナビゲーションを実装するための Vue ルーターリンク コンポーネントの詳細な分析
Vue.js を使用して、コンポーネントを使用してアプリケーションを構成しました。 Vue Router を追加するときに必要なのは、 コンポーネントをルート にマップして、Vue Router がコンポーネントをレンダリングする場所を認識できるようにすることだけです。 [関連する推奨事項: vue.js ビデオ チュートリアル ]
# を使用する##router-link コンポーネントは、to を渡してリンクを指定することで移動します。
b988a8fd72e5e0e42afffd18f951b277 は、正しい
href 属性を使用して
3499910bf9dac5ae3c52d5ede7383485 タグをレンダリングします。
公式例:
<script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue-router@4"></script> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>通常の
a タグを使用する代わりに、カスタム コンポーネント
router-link を使用してリンクを作成します。これにより、Vue Router はページをリロードせずに
URL を変更し、URL の生成とエンコードを処理できるようになります。
router-view
URLに対応するコンポーネントが表示されます。レイアウトに合わせてどこにでも設置できます。 プログラムによるナビゲーション
を使用してナビゲーション リンクを定義するタグを作成することに加えて、router のインスタンス メソッドを使用して次のことを行うこともできます。コードを実行します。 別の URL に移動するには、
メソッドを使用します。このメソッドは、履歴スタックに 新しいレコードを追加します
。そのため、ユーザーがブラウザの戻るボタンをクリックすると、前の URL に戻ります。
をクリックすると、このメソッドが内部で呼び出されるので、327e3535b9e0e9f12607bd1fd4e603ad# をクリックします。
##router.push(...) の呼び出しと同等:
#router.push(...) |
| #このメソッドのパラメータには、文字列パスまたはアドレスを記述するオブジェクトを指定できます。
: パスが指定されている場合、パラメータは無視されます
// `params` 不能与 `path` 一起使用 router.push({ path: '/user', params: { username } }) // -> /user
現在の位置を置き換えます関数は
と同じです。 router.pushrouter.replace(...) |
|
routeLocation に属性を直接追加することもできます。 true
:<pre class="brush:php;toolbar:false">router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })</pre>
Across Historyこのメソッドは整数をパラメータとして受け取り、
以上がルート ナビゲーションを実装するための Vue ルーターリンク コンポーネントの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。