ルート ナビゲーションを実装するための Vue ルーターリンク コンポーネントの詳細な分析

Vue Router

Vue.js を使用して、コンポーネントを使用してアプリケーションを構成しました。 Vue Router を追加するときに必要なのは、 コンポーネントをルート にマップして、Vue Router がコンポーネントをレンダリングする場所を認識できるようにすることだけです。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

Vue Router の使用法

宣言的

# を使用する##router-link コンポーネントは、to を渡してリンクを指定することで移動します。
は、正しい href 属性を使用して タグをレンダリングします。 公式例:

<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

router-view
URLに対応するコンポーネントが表示されます。レイアウトに合わせてどこにでも設置できます。 プログラムによるナビゲーション

を使用してナビゲーション リンクを定義するタグを作成することに加えて、router のインスタンス メソッドを使用して次のことを行うこともできます。コードを実行します。 別の URL に移動するには、

router.push

メソッドを使用します。このメソッドは、履歴スタックに 新しいレコードを追加します。そのため、ユーザーがブラウザの戻るボタンをクリックすると、前の URL に戻ります。

をクリックすると、このメソッドが内部で呼び出されるので、<router-link :to="..."># をクリックします。 ##router.push(...) の呼び出しと同等:

宣言的プログラム的#<ルーターリンク :to="...">#このメソッドのパラメータには、文字列パスまたはアドレスを記述するオブジェクトを指定できます。

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

#router.push(...)

注

: パスが指定されている場合、パラメータは無視されます

// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

現在の位置を置き換えます関数は

と同じです。 router.push

同様ですが、ナビゲーション中に履歴に新しいレコードが追加されない点が異なります

宣言的プログラム的<ルーターリンク :to="..." replace>router.push

router.replace(...)

replace に渡される

routeLocation に属性を直接追加することもできます。 true ：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">router.push({ path: &amp;#39;/home&amp;#39;, replace: true }) // 相当于 router.replace({ path: &amp;#39;/home&amp;#39; })</pre><div class="contentsignin">ログイン後にコピー</div></div>Across History<code>このメソッドは整数をパラメータとして受け取り、

window.history と同様に、履歴スタック内で前進または後退するステップ数を示します。 go(n)

。

rree

以上がルート ナビゲーションを実装するための Vue ルーターリンク コンポーネントの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。