Vue-Routerのルート設定の詳しい説明

インターフェース RouteConfig = {
  パス: 文字列、
  コンポーネント?: コンポーネント、
  name?: string, // 名前付きルート *components?: { [name: string]: Component }, // 名前付きビューコンポーネント https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE
  リダイレクト?: 文字列 | 場所 | 機能、
  プロパティ?: ブール値 | オブジェクト | 関数、
  エイリアス?: 文字列 | 配列<文字列>,
  children?: Array<RouteConfig>, // ネストされたルート beforeEnter?: (to: Route, from: Route, next: Function) => void,
  *メタ?: 任意、
  // 2.6.0以上
  *caseSensitive?: boolean, // 一致ルールは大文字と小文字を区別しますか? (デフォルト値: false)
  *pathToRegexpOptions?: オブジェクト // 正規表現オプションをコンパイルする}

定数ルート = [
    {
      パス： '/'、
      コンポーネント: ホーム
    },
    {
      パス:'/user',
      コンポーネント: ユーザー
    }
  ]
  
  const ルーター = 新しい VueRouter({
    ルート
  })

定数ルート = [
    {
      パス： '/'、
      コンポーネント: ホーム
    },
    {
      path:'/user/:id/:local', // 動的パス:id :local
      コンポーネント: ユーザー
    }
]
  
const ルーター = 新しい VueRouter({
    ルート、
})
//ルートジャンプ <div id="app">
    <ルータービュー />
    // 次のリンクは /user/:id/:local に一致します <router-link to="/user/007/lk">User 007</router-link>
    <router-link to="/user/111/js">ユーザー 111</router-link>
    <router-link to="/user/10086/yk">ユーザー 10086</router-link>
    <router-link to="/user/241247/la">ユーザー 241247</router-link>
</div>
/* 上記のルートにジャンプすると、対応するルート ビュー コンポーネント ユーザーは、this.$route.params を通じて動的パスに一致する情報を取得できます。例: url /user/007/lk this.$route.params -> {id:'007',local:'lk'}
      url /user/10086/yk this.$route.params -> {id:'10086',local:'yk'}
*/

// http://localhost:8080/#/user/10086/cc?wd=iPhone&aa=テスト
{
    name: undefined, // 現在のルート名 *fullPath: "/user/10086/cc" // 現在の URL フルパス *hash: "" // 現在のルートのハッシュ *matched: [{…}] 
    *メタ: {}
    params: {id: "10086", local: "cc"} // 動的パスはキーと値のペアのオブジェクトと一致します *path: "/user/10086/cc" // 現在の URL に一致するパス query: { // URL のクエリ文字列? 次のパラメータから解析されたオブジェクト wd: "iPhone",
        aa: 「テスト」
    } 
}

'vue' から Vue をインポートします
'../views/HotMusicList' から HotMusicList をインポートします

定数ルート = [
  {
    パス: '/hot',
    コンポーネント: HotMusicList
  },
  {
    // 動的パスマッチングは、次の方法で各曲ごとに異なる ID を取得します: id
    パス: '/music/:id',
    // 関数の形式によるルートの遅延読み込みにより、プロジェクトの開始時に読み込みが許可されていないコンポーネントをプロジェクトに読み込むことができます // ブラウザーが現在のルートにジャンプしたときにのみ、ルート コンポーネントがプロジェクトに読み込まれます // これを行う利点は、不要な読み込みを減らし、アプリケーションの読み込み速度と実行帯域幅を削減することです コンポーネント: () => import('../views/MusicPlay') 
  }
]

定数ルート = [
  {
    パス: '/user', 
    名前: 'ユーザー',
    コンポーネント: () => import('../views/User.vue')
  }
]

定数ルート = [
  {
    パス: '/contact',
    コンポーネント: ContactView
  },
  {
    パス: '/user/:id', 
    名前: 'ユーザー',
    コンポーネント: () => import('../views/User.vue')
  },
  {
    パス: '/oldpath1',
    リダイレクト: '/contact'
  },
  {
    パス: '/oldpath2',
    リダイレクト: { 名前: 'ユーザー'、パラメータ: { 名前: 'シャオミン'、年齢: 19 } }
  },
  /*
      リダイレクトは、oldpath にアクセスしたときに生成される場所オブジェクトであるパラメータを受け取る関数の形式をサポートします。リダイレクト関数の形式は、リダイレクト ルートのパスまたは場所を返す必要があります。
  */
  {
    パス: '/oldpath2',
    リダイレクト:(oldpathLocation) => '/contact'
  }
  {
    パス: '/oldpath4',
    リダイレクト:(oldpathLocation) => { name: 'ユーザー', パラメータ: { name: 'シャオミン', 年齢: 19 } }
  }
]

定数ルート = [
  {
    パス: '/hot',
    コンポーネント: HotMusicList
  },
  {
    // 動的パスマッチングは、次の方法で各曲ごとに異なる ID を取得します: id
    パス: '/music/:id',
    // 遅延読み込みコンポーネントのルーティング: () => import('../views/MusicPlay'), 
    プロパティ: true
  }
]
// This.$route.id はコンポーネント内から props id を通じてアクセスできます
<テンプレート>
  <div>
      曲の再生 <audio controls :src="musicUrl"/>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  props: ['id'], // ルートの動的パスに一致するキーと値のペアは、現在のコンポーネントの同じ名前のプロパティに自動的に渡されます
  データ（） {
      戻る {
          音楽URL: ''
      }
  },
  作成された() {
    フェッチ(`/song/url?id=${this.id}`)
      .then((res) => res.json())
      .then(({ データ }) => {
          //実際の開発では、データ要求が成功したかどうかを判断する必要があります console.log(data[0]);
          // 曲データをデータに割り当てる
        this.musicUrl = データ[0]?.url
      });
  },
};
</スクリプト>

{
    パス: '/home/:id',
    名前: 'ホーム'、
    小道具: {
        a: 1、
        b: 偽
    },
    コンポーネント: ホーム
}

{
    パス: '/home/:id',
    名前: 'ホーム'、
    プロパティ: (ルート) => ({
        a: route.query.wd, // ルート query.wd をコンポーネント Home の props に渡します
        b: route.params.id //ルート params.id をコンポーネント Home の b プロパティに渡します
    }）、
    コンポーネント: ホーム
}

定数ルート = [
  {
    パス: '/hot',
    コンポーネント: HotMusicList、
    エイリアス: ['/list','/rank','recommend']
  }
]

[
    {
    パス: '/home',
    コンポーネント: ホーム、
    子供たち： [
      {
        パス: '/home/follow',
        コンポーネント: () => import('../views/home/Follow')
      },
      {
        path: 'recommend', //ルートの前の / なしの相対パスは "/home/recommed" と同等です
        コンポーネント: () => import('../views/home/Recommend')
      }
    ]
    }
]

<テンプレート>
  <div>
    <h3>ホーム</h3>
    <div class="tab">
      <router-link to="/home/follow">フォロー</router-link>|
      <button @click="gotoRecommend">推奨</button>
    </div>
    <ルータービュー />
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  メソッド: {
    gotoRecommend() {
      // this.$router.push("/home/recommend");
      this.$router.push({path:"/home/recommend", クエリ:{wd:1,offset:0}})
    },
  },
};
</スクリプト>

<テンプレート>
  <div>
    <h3>ホーム</h3>
    <div class="tab">
      <router-link to="/home/follow">フォロー</router-link>|
      <button @click="gotoRecommend">推奨</button>
    </div>
    <ルータービュー />
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  メソッド: {
    gotoRecommend() {
      // this.$router.replace("/home/recommend");
      this.$router.replace({path:"/home/recommend", クエリ:{wd:1,offset:0}})
    },
  },
};
</スクリプト>

this.$router.go(3) // 現在のルート履歴スタックから 3 エントリ進む this.$router.go(-1) // 現在のルート履歴スタックから 1 エントリ戻る this.$router.go(0) // ページを強制的に更新する

this.$router.back() // this.$router.go(-1) と同等

this.$router.forward() // this.$router.go(1) と同等

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
'../views/Home.vue' から Home をインポートします。

Vue.use(VueRouter)

定数ルート = [
  {
    パス： '/'、
    名前: 'ホーム'、
    コンポーネント: ホーム
  },
]

const ルーター = 新しい VueRouter({
  ルート
})

デフォルトルーターをエクスポートする

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。

Vue.use(VueRouter)

定数ルート = [
  {
    パス: '/mock',
    名前:「モック」
    // ルートレベルのコード分割
    // これにより、このルート用の別のチャンク (about.[hash].js) が生成されます
    // ルートが訪問されたときに遅延ロードされます。
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/Mock.vue')
  }
]

const ルーター = 新しい VueRouter({
  ルート
})

デフォルトルーターをエクスポートする

エクスポートデフォルト{
  プロパティ: ['id'],
  データ（） {
      戻る {
          音楽URL: ''
      }
  },

  beforeRouteEnter (to、from、next) {
    // このコンポーネントをレンダリングする対応するルートが確認される前に呼び出されます // いいえ!できる！コンポーネントインスタンス `this` を取得します。
    //ガードが実行される前にコンポーネントインスタンスが作成されていないため console.log(undefined)
  },
  beforeRouteUpdate (to、from、next) {
    // 現在のルートが変更されたがコンポーネントが再利用されたときに呼び出されます // たとえば、動的パラメータを持つパス /foo/:id の場合、/foo/1 と /foo/2 の間を移動すると、
    // 同じ Foo コンポーネントがレンダリングされるため、コンポーネント インスタンスが再利用されます。この場合、このフックが呼び出されます。
    // コンポーネントインスタンス `this` にアクセスできます
  },
  beforeRouteLeave (to、from、next) {
    // このコンポーネントの対応するルートから移動するときに呼び出されます // コンポーネントインスタンス `this` にアクセスできます
  }
}

next() // ルーティング ジャンプを許可する next(true) // ルーティング ジャンプを許可する next(false) // ルーティング ジャンプを許可しない next('/') / next({ path: '/' }) // 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが実行されます。任意の場所オブジェクトを next に渡すことができ、replace: true、name: 'home' などのオプションを設定できます。
// beforeRouteEnter の next メソッドのみがコールバック関数を受け入れることができることに注意してください。
// コールバック関数は、現在のルーティングコンポーネントインスタンスオブジェクトをパラメータとして受け取り、それを通じて現在のコンポーネントを操作できます beforeRouteEnter(to, from, next) {
    console.log(宛先、送信元)
    console.log('コンポーネントが入力されようとしていますが、コンポーネントインスタンスがまだ存在しません', this)
    次(vm => {
      フェッチ(`/song/url?id=${vm.id}`)
      .then((res) => res.json())
      .then(({ データ }) => {
          //実際の開発では、データ要求が成功したかどうかを判断する必要があります console.log(data[0]);
          // 曲データをデータに割り当てる
        vm.musicUrl = データ[0]?.url
      });
    }) // ルーティングのジャンプを許可する }

beforeEnter(to, from, next) は、ルータが現在のルートに移動しようとしているときにトリガーされます。const router = new VueRouter({
  ルート: [
    {
      パス: '/foo',
      コンポーネント: Foo、
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

定数ルート = [
    {
        パス： '/'、
        コンポーネント: ホーム
    },
    {
        パス: '/discover',
        コンポーネント: () => import('../views/Discover')
    },
    {
        パス: '/mine',
        コンポーネント: () => import('../views/Mine'),
        //ルート排他ガード beforeEnter(to, from, next) {
            // このガードは DOM 操作を実行せず、コンポーネント自身の状態を読み書きしないため // このようなガードはルート排他ガードとして使用できます // 正しいアプローチは Cookie ストレージ内です if (localStorage.getItem("user")) {
              次（）;
            } それ以外 {
              // ここには this はなく、next はコールバック関数を受け取り、コールバック関数にジャンプします // 次の記述は個人ページに入り、個人ページからログインページにリダイレクトするため、不要なバグが発生する可能性があります
              // 次((vm) => {
              // vm.$router.replace('/landr')
              // });
              next({name:'login',params:{to}}); //このジャンプを防ぎ、指定されたルートに直接移動します}
          }
    },
    {
        パス: '/landr', // ログインして登録
        コンポーネント: () => import('../views/loginanregister/LoginAndRegister'),
        子供たち： [
            {
                名前:'ログイン',
                パス: 'ログイン',
                コンポーネント: () => import('../views/loginanregister/Login')
            },
            {
                パス: 'register',
                コンポーネント: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'../views/Home' から Home をインポートします

Vue.use(ルーター)

定数ルート = [
    {
        パス： '/'、
        名前: 'ホーム'、
        コンポーネント: ホーム
    },
    {
        パス: '/discover',
        名前: 「発見」
        コンポーネント: () => import('../views/Discover')
    },
    {
        パス: '/mine',
        名前: 「マイン」
        コンポーネント: () => import('../views/Mine'),
    },
    {
        パス: '/landr', // ログインして登録
        コンポーネント: () => import('../views/loginanregister/LoginAndRegister'),
        子供たち： [
            {
                名前: 'ログイン',
                パス: 'ログイン',
                コンポーネント: () => import('../views/loginanregister/Login')
            },
            {
                パス: 'register',
                コンポーネント: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

const router = 新しいルーター({
    ルート、
    linkExactActiveClass: 'active'
})
// グローバルルートガード すべてのルートジャンプはこのガードを呼び出します // グローバルルートガードは、Vue ルーターアプリケーションでのログイン検証に最適な場所でもあります router.beforeEach((to, from, next) => {

    if(to.name === "Mine" || to.name === "Discover") {
        // このガードは DOM 操作を実行せず、コンポーネント自身の状態を読み書きしないため // このようなガードはルート排他ガードとして使用できます // 正しいアプローチは Cookie ストレージ内です if (localStorage.getItem("user")) {
            次（）;
        } それ以外 {
            // ここには this はなく、next はコールバック関数を受け取り、コールバック関数にジャンプします // 次の記述は個人ページに入り、個人ページからログインページにリダイレクトするため、不要なバグが発生する可能性があります
            // 次((vm) => {
            // vm.$router.replace('/landr')
            // });
            next({ name: 'login', params: { to } }); //このリダイレクトを防ぎ、指定されたルートに直接移動します}
    }それ以外 {
        次（）
    }

})

デフォルトルーターをエクスポートする