Vue.js ルーティングのその他の操作

今回は、Vue.js のその他の操作ルーティングを紹介します。その他の操作で Vue.js ルーティングを使用する場合の注意事項 について、実際のケースを見てみましょう。

現在のパスに基づいて、apple

   <router-link to="apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

にジャンプします。ルートディレクトリにジャンプしたい場合は、apple

   <router-link to="/apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

の前に/

<template>
  <div id="app">
    <router-link :to="path">to apple</router-link>
    ......  </div></template><script>
  export default {
    data () {      return {        path: &#39;apple&#39;
      }
    }
  }</script>

を追加します。バインドされている場合は、パスを動的に変更することもできます

<router-link :to="&#39;apple&#39;">to apple</router-link>

Ifパスを動的に変更するには、パスを直接記述することもできます。注: apple は一重引用符で囲む必要があります。そうしないと、データに移動して apple を見つけられず、エラーが発生します。

オブジェクト

がレポートされます

<router-link :to="{path:&#39;banana&#39;,param:{color:&#39;yellow&#39;}}">to banana</router-link>

パラメータを渡すこともできます

<router-link :to="&#39;apple&#39;" tag="li">to apple</router-link>

タグを使ってリンクをliタグに変更することももちろん可能です

router.push('apple')
或者
router.push({path: 'apple'})
或者name
......

※上記は全て宣言型ナビゲーションです

しましょう。プログラムによるナビゲーションを体験してくださいプッシュ ページを通じて特定のタグにジャンプできます

rrreee
アプリケーション シナリオ:

ルートを切り替えるたびに、そのユーザーにいくつかの操作を設定します

例: ユーザーがログインしていない場合は、ユーザーのログイン ステータスを確認します。プログラムによるナビゲーションを通じてログイン インターフェイスに移動しますrouter .before
Each(router.push('Login Interface'))

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Vue.jsのVueタグ属性と条件付きレンダリング

Vue.jsの配列オブジェクトサブコンポーネントのリストレンダリング

Vue.jsを使用する際の注意点は何ですか

🎜

以上がVue.js ルーティングのその他の操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。