非常に詳細な Vue-Router のステップバイステップのチュートリアル

<ルータービュー></ルータービュー>
<!--または-->
<ルータービュー名="フッター"></ルータービュー>

<router-link :to="{ path: '/login'}" を tag="span" に置き換えます></router-link>

const ルーター = 新しい VueRouter({
  ルート: [
    { パス: '/'、リダイレクト: '/login' }
  ]
})

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

const ルーター = 新しい VueRouter({
  ルート: [
    { パス: '/a'、コンポーネント: A、エイリアス: '/b' }
  ]
})

{
 パス: '/vuex/:id',
 名前: 'Vuex'、
 コンポーネント: () => import('@/view/vuex'),
 プロパティ: true、
 メイト：
  タイトル: 'vuex'
 }
}

<router-link :to="{name:'Vuex', params: {id: '99999'}}" tag="h1">ジャンプ</router-link>
<!--または-->
トゥネクスト() {
    this.$router.push({
     名前: 'Vuex'、
     パラメータ: {
      id: '99999'
     }
    })
}

小道具: {
 id: {
  タイプ: 文字列、
  デフォルト： ''
 }
}
<!--または-->
this.$params.id

{
 パス: '/vuex',
 名前: 'Vuex'、
 コンポーネント: () => import('@/view/vuex'),
 小道具: {
  id: '99999'
 },
 メイト：
  タイトル: 'vuex'
 }
}

<router-link :to="{name:'Vuex'}" tag="h1">ジャンプ</router-link>
<!--または-->
トゥネクスト() {
 this.$router.push({
  名前: 'Vuex'
 })
}

小道具: {
 id: {
  タイプ: 文字列、
  デフォルト： ''
 }
}
<!--または-->
this.$params.id

{
 パス: '/vuex',
 名前: 'Vuex'、
 コンポーネント: () => import('@/view/vuex'),
 プロパティ: ルート => ({
     <!--クエリ-->
  id: ルート.クエリ.id、
  <!--パラメータ-->
  年齢: route.params.age
 }）、
 メイト：
  タイトル: 'vuex'
 }
}

<router-link :to="{name:'Vuex',query: {id: '99999'}, params:{age:'20'}}" tag="h1">ジャンプ</router-link>
<!--または-->
トゥネクスト() {
 this.$router.push({
  名前: 'Vuex'、
  クエリ: {
   id: '999999'
  },
  パラメータ: {
   年齢: '20'
  }
 })
}

小道具: {
 id: {
  タイプ: 文字列、
  デフォルト： ''
 },
 年： {
  タイプ: 文字列、
  デフォルト： ''
 }
}
<!--または-->
this.$route.query
this.$route.params

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

router.beforeEach((to, from, next) => {
  // ...
})

router.eforeResolve((to, from, next) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

const ルーター = 新しい VueRouter({
  ルート: [
    {
      パス: '/foo',
      コンポーネント: Foo、
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

const フッター = {
  テンプレート: `...`,
  beforeRouteEnter(to, from, next) {
    次(vm => {
        // `vm` 経由でコンポーネントインスタンスにアクセスします})
  }
}

定数Foo = {
  テンプレート: `...`,
  ルート更新前(to、from、next) {
    this.name = to.params.name
    次（）
  }
}

定数Foo = {
  テンプレート: `...`,
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('本当に終了してもよろしいですか?')
    （答え）の場合{
        次（）
    } それ以外 {
        次へ(偽)
    }
  }
}

const ルーター = 新しい VueRouter({
  ルート: [
    {
  パス: '/index',
  名前: 'インデックス'、
  コンポーネント: () => import('@/view/index'),
  メタ: {
   タイトル: 'ホームページ'、
   rolu: ['管理者', 'ボス']
  }
 }
  ]
})

<トランジション:name="トランジション名">
  <ルータービュー></ルータービュー>
</トランジション>

時計：
  '$route' (to、from) {
    定数 toD = to.path.split('/').length
    定数 fromD = from.path.split('/').length
    this.transitionName = toD < fromD ? 'slide-right' : 'slide-left'
  }
}

const ルーター = 新しい VueRouter({
 モード: 'ハッシュ'、
 ルート、
 scrollBehavior(to, from, savedPosition) {
  if (保存された位置) {
   新しい Promise を返します ((resolve, reject) => {
    タイムアウトを設定する(() => {
     解決(保存された位置)
    }, 1000)
   })
  } それ以外 {
   戻り値: { x: 0, y: 0 }
  }
 }
})

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

定数ルート = [
 {
  パス： '/'、
  リダイレクト: '/index'
 },
 {
  パス: '/index',
  名前: 'インデックス'、
  コンポーネント: () => import(/* webpackChunkName: "index" */ '@/view/index'),
  メイト：
   タイトル: 'ホームページ'、
   認証: 偽
  }
 },
 {
  パス: '/login',
  名前: 'ログイン',
  コンポーネント: () => import(/* webpackChunkName: "login" */ '@/view/login'),
  メタ: {
   タイトル: 「ログイン」
   認証: 偽
  },
  子供たち： [
   {
    パス: 'children',
    名前: 「子供」
    コンポーネント: () => import(/* webpackChunkName: "children" */ '@/view/children'),
    メイト：
     タイトル: 「ネストされたサブルート」
     認証: 偽
    }
   }
  ]
 }
]

const ルーター = 新しい VueRouter({
 モード: 'ハッシュ'、
 ルート
})

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