Vue Router の 10 の高度なヒントのまとめ

時計：
  '$route' (to、from) {
  // ルートの変更に応答します...
  }
}

beforeRouteUpdate (to、from、next) {
// ルートの変更に反応します...
// next() を忘れずに呼び出してください
}

{
// すべてのパスに一致します パス: '*'
}
{
// `/user-` で始まるパスに一致します。パス: '/user-*'
}

//ルートが指定されている場合 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
//ルートが指定されている場合 { path: '*' }
this.$router.push('/存在しない')
this.$route.params.pathMatch // '/存在しない'

// 名前付きパラメータは「単一の文字」で構成されている必要があります [A-Za-z09] // ?オプション パラメータ { パス: '/optional-params/:foo?' }
// ルーティングは foo パラメータを設定することも設定しないこともでき、オプションです <router-link to="/optional-params">/optional-params</router-link>
<router-link to="/optional-params/foo">/optional-params/foo</router-link>
 
// 0 個以上のパラメータ { パス: '/optional-params/*' }
<router-link to="/number">パラメータなし</router-link>
<router-link to="/number/foo000">パラメータ</router-link>
<router-link to="/number/foo111/fff222">複数のパラメータ</router-link>
 
 
// 1 つ以上のパラメータ { path: '/optional-params/:foo+' }
<router-link to="/number/foo">パラメータ</router-link>
<router-link to="/number/foo/foo111/fff222">複数のパラメータ</router-link>
 
// カスタムマッチングパラメータ // すべてのパラメータにカスタム正規表現を指定することができます。これはデフォルト ([^\/]+) を上書きします。
{ パス: '/optional-params/:id(\\d+)' }
{ パス: '/optional-params/(foo/)?bar' }

// コンポーネント 1
this.$router.push({ name: 'number' }, () => {
  console.log('コンポーネント1: onCompleteコールバック');
}, () => {
  console.log('コンポーネント1: onAbortコールバック');
});

// コンポーネント 2
beforeRouteEnter(to, from, next) {
  console.log('コンポーネント2: beforeRouteEnter');
  次（）;
},
作成前() {
  console.log('コンポーネント2: beforeCreate');
},
作成された() {
  console.log('コンポーネント2: 作成されました');
}

this.$router.push({ name: 'number'}, () => {
  console.log('コンポーネント2: onCompleteコールバック');
}, () => {
  console.log('コンポーネント2、自己ジャンプ: onAbortコールバック');
});

this.$router.push({ name: 'number', params: { foo: this.number}}, () => {
    console.log('コンポーネント2: onCompleteコールバック');
}, () => {
    console.log('コンポーネント2、自己ジャンプ: onAbortコールバック');
});

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const ルーター = 新しい VueRouter({
ルート: [
  {
    パス： '/'、
    コンポーネント:
        デフォルト: Foo、
        a: バー、
        b: バズ
    }
    }
  ]
});

{ パス: '/a'、リダイレクト: '/b' }
{ パス: '/a'、リダイレクト: { 名前: 'foo' }}
{ パス: '/a'、リダイレクト先: => {
  // メソッドはターゲットルートをパラメータとして受け取り、// リダイレクトされた文字列パス/パスオブジェクトを返します }}

// ルーター ファイル // 名前付きビューを含むルートの場合は、名前付きビューごとに `props` オプションを個別に追加する必要があります。
{
  パス: '/number/:name',
  プロパティ: true、
  // オブジェクト モードのプロパティ: {newsletterPopup: false }
  // 関数モードのプロパティ: (route) => ({ query: route.parmas.name })
  名前: '番号',
  コンポーネント: () => import( /* webpackChunkName: "number" */ './views/Number.vue')
}

//コンポーネントはエクスポートのデフォルトを取得します{
  プロパティ: ['名前']
}

//エントリファイルimport router from './router'
 
// グローバルフロントガード router.beforeEach((to, from, next) => {
console.log('beforeEach グローバル フロント ガード');
次（）;
});
// グローバル解決ガード router.beforeResolve((to, from, next) => {
console.log('beforeResolve グローバル解決ガード');
次（）;
});
// グローバルポストガード router.afterEach((to, from) => {
console.log('afterEach グローバル ポスト ガード');
});

{
  パス: '/number/:name',
  プロパティ: true、
  名前: '番号',
  // ルーティング排他ガード beforeEnter: (to, from, next) => {
      console.log('beforeEnterルート排他ガード');
      次（）;
  },
  コンポーネント: () => import( /* webpackChunkName: "number" */ './views/Number.vue')
}

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