Vue-router公式ドキュメントノート

vue-router
Vueのルーティングはpcの中のアンカーハイパーリンクに相当し、ページをクリックしてどこに向かうかもajaxに似ています.
インストールnpm install vue-router
スタート
Vueでjs+vue-routerは、単一ページアプリケーションを作成するのは簡単です.Vueを使用します.jsでは、コンポーネントをアプリケーションに組み合わせました.vue-routerを追加するには、コンポーネントとルーティングマッピングを構成し、vue-routerがどこでレンダリングされているかを伝えるだけです.コンポーネント→ルーティング→レンダリング場所

<div id="app">
  <h1>Hello App!h1>
  <p>
    
    
    
    <router-link to="/foo">Go to Foorouter-link>
    <router-link to="/bar">Go to Barrouter-link>
  p>
  
  
  <router-view>router-view>
div>

// 0.            ，  Vue VueRouter，    Vue.use(VueRouter)

// 1.   （  ）  。
//         import   
const Foo = { template: '
foo
' }
const Bar = { template: '
bar
' }

// 2.     
//             。   "component"    
//    Vue.extend()         ，
//   ，          。
//            。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

// 3.    router   ，    `routes`   
//            ,          。
const router = new VueRouter({
  routes // （  ）    routes: routes
})

// 4.         。
//       router         ，
//              
const app = new Vue({
  router
}).$mount('#app')

//   ，       ！

ダイナミックルーティングマッチング
あるパターンが一致するすべてのルーティングを、同じコンポーネントにマッピングする必要があることがよくあります.たとえば、すべてのIDが異なるユーザーに対して、このコンポーネントを使用してレンダリングするUserコンポーネントがあります.では,vue−routerのルーティング経路において動的経路パラメータを用いてこの効果を達成することができる.

const User = {
  template: '
User
'
}
const router = new VueRouter({
    routes: [
        {path: '/user/:id', component: User}
    ]
})

パスパラメータ用:表示.1つのルーティングで複数のパスパラメータを設定ことができ、対応する値はrouteに設定.params.他にはparamsに加えてrouteオブジェクトはroute.query, route.hashなど.ルーティングパラメータを使用すると、コンポーネントインスタンスが多重化されます.これは、コンポーネントのライフサイクルフックが呼び出されないことを意味します.ルーティングパラメータの変化に応答したい場合は、簡単にwatch routeオブジェクトを呼び出すことができます.

const User = {
    template: '...',
    watch: {
        '$route' (to, from) {

        }
    }
}

ネストされたルーティング
コンポーネントテンプレートには独自の出口がある可能性があります.ネストされた出口でコンポーネントをレンダリングするには、VueRouterのパラメータでchildren構成を使用する必要があります.

const router = new VueRouter({
    router: [
        {path: '/user/:id', component: User,
            children: [
                {
                    path: 'profile',
                    component: UserProfile
                },
                {
                    path: 'posts',
                    component: UserPosts
                }
            ]
        }
    ]
})

先頭のネストされたパスはルートパスとして扱われることに注意してください.これにより、ネストされたパスを設定することなく、ネストされたコンポーネントを十分に使用できます.
プログラミングナビゲーション
aラベルの作成を使用してナビゲーションリンクを定義するだけでなく、routerのインスタンスメソッドを使用してコードを記述することで実現することもできます.router.push()この方法はhistoryスタックにレコードrouterを追加する.push() ==

//    
router.push('home')

//   
router.push({ path: 'home' })

//      
router.push({ name: 'user', params: { userId: 123 }})

//      ，   /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.replace(location) router.replace(location) == router.go(n)この方法のパラメータは整数で、history記録の中でwindowのように何歩前進するか後退するかを意味する.history.go(n)
名前付きルーティング
主に1つの名前でルーティングを識別するために便利です.

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

名前付きビュー
複数のビューを同時に表示したい場合があります.

<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 router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

リダイレクトとエイリアス

const router = new VueRouter({
    routes: [
        {path: '/a', redirect: '/b'}
    ]
})

リダイレクトのターゲットは、名前付きルーティングであってもよい.

const router = new VueRouter({
    routes: [
        {path: '/a', redirect: {name: 'foo'}}
    ]
})

一つの方法でも

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      //               
      // return           /    
    }}
  ]
})

別名＃ベツメイ＃
/aの別名は/bであり、ユーザが/bにアクセスするとURLは/bに保たれるが、ルーティングマッチングは/aであり、ユーザが/aにアクセスするようにする.

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

HTML 5 Historyモード
historyモードを使用する場合、URLは通常のurlです.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

ナビゲーションフック
その名前のように、vue-routerが提供するナビゲーションフックは、主にナビゲーションをブロックし、ジャンプまたはキャンセルを完了させるために使用されます.フックは、ルーティングナビゲーションが発生したときに実行できる方法がいくつかあります.グローバル、単一のルーティングがユニーク、またはコンポーネントレベルです.グローバルフック

const router = new VueRouter({ ... })

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

    to: Route:              

    from: Route:            

    next: Function:           resolve     。       next        。

        next():            。          ，         confirmed （   ）。

        next(false):        。       URL    （                ），   URL        from        。

        next('/')    next({ path: '/' }):           。        ，          。

      next   ，         resolved。

ルート固有のフック

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

アセンブリ内のフック

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    //              confirm    
    //  ！ ！       `this`
    //         ，         
  },
  beforeRouteUpdate (to, from, next) {
    //        ，           
    //     ，              /foo/:id，  /foo/1   /foo/2        ，
    //          Foo   ，          。                。
    //          `this`
  },
  beforeRouteLeave (to, from, next) {
    //                
    //          `this`
  }
}

ルーティングメタ情報定義ルーティング時にmetaフィールドを構成できます

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

routes構成の各ルーティングオブジェクトをルーティングレコードと呼ぶ.ルーティングレコードはネストされてもよいので、1つのルーティングマッチングが成功すると、複数のルーティングレコードにマッチングする可能性がある.例えば、上記のルーティング構成によれば、/foo/barというURLは、ルーティングレコードおよびサブルーティングレコードに一致する.1つのルーティングが一致するすべてのルーティングレコードはrouteオブジェクト(ナビゲーションフック内のrouteオブジェクトもある)のrouteに露出する.matched配列.そのため、$routeを巡る必要があります.matchedは、ルーティングレコードのmetaフィールドをチェックします.
トランジション効果
基本的なダイナミックコンポーネントなので、コンポーネントで移行効果を追加できます.
データ取得
あるルーティングに入ると、サーバからデータを取得する必要がある場合があります.たとえば、ユーザー情報をレンダリングする場合、サーバからユーザーのデータを取得する必要があります.私たちは2つの方法で実現できます.1.ナビゲーションが完了したら取得:ナビゲーションを完了し、次のコンポーネントライフサイクルフックでデータを取得し、データ取得中にロード中の指示を表示します.2.ナビゲーションが完了する前に取得:ナビゲーションが完了する前に、ルーティングのenterフックでデータを取得し、データ取得に成功した後にナビゲーションを実行します.ナビゲーションが完了したら、データを取得します.この方法を使用すると、すぐにコンポーネントをナビゲートしてレンダリングし、コンポーネントのcreatedフックでデータを取得します.これにより、データ取得中にloadingステータスを表示する機会があり、異なるビュー間で異なるloadingステータスを表示することもできます.

  

export default {
    data() {
        return {
            loading: false,
            post: null,
            error: null
        }
    },
    created() {
        //           ，
        //   data   observed 
        this.fetchData()
    },
    watch: {
        //        ，        
        '$route': 'fetchData'
    },
    methods: {
        this.error = this.post =null
        this.loading =true
        // replace getPost with your data fetching util/API wrapper
        getPost(this.$route.params.id, (err ,post) => {
            this.loading = false
            if(err) {
                this.error = err.toString()
            } else {
                this.post = post
            }
        })
    }
}

ナビゲーションが完了する前にデータを取得

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => 
      if (err) {
        // display some global error message
        next(false)
      } else {
        next(vm => {
          vm.post = post
        })
      }
    })
  },
  //      ，         
  //       
  watch: {
    $route () {
      this.post = null
      getPost(this.$route.params.id, (err, post) => {
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

スクロール動作
フロントエンドルーティングを使用して、新しいルーティングに切り替えると、ページを再ロードするように、ページを上部にスクロールしたり、元のスクロール位置を維持したりします.vue-routerは、ルーティング切り替え時にページがどのようにスクロールするかをカスタマイズすることができます.

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return           
  }
})

ルートインロード
構築アプリケーションをパッケージ化すると、Javascriptパッケージが非常に大きくなり、ページのロードに影響します.異なるルーティングに対応するコンポーネントを異なるコードブロックに分割し、ルーティングがアクセスされると対応するコンポーネントをロードすることができれば、より効率的になります.Vueの非同期コンポーネントとWebpackのcode splitting featureを組み合わせて、ルーティングコンポーネントの怠惰なロードを簡単に実現します.ルーティングに対応するコンポーネントを非同期コンポーネントとして定義することです.

const Foo = resolve => {
  // require.ensure   Webpack      ，     code-split point
  // （    ）
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}

または

const Foo = resolve => require(['./Foo.vue'], resolve)

APIドキュメント
コンポーネントは、ルーティング機能を備えたアプリケーションでのユーザのナビゲーションをサポートします(クリック).to属性でターゲットアドレスを指定し、デフォルトでは正しく接続されたラベルとしてレンダリングされ、tag属性を構成することで別のラベルを生成できます.また、ターゲットルーティングが正常にアクティブ化されると、リンク要素は自動的にアクティブ化を示すCSSクラス名を設定します.しかし、死んだラベルを書くよりは、次の理由があります.HTML 5 historyモードでもhashモードでも、その表現挙動は一致するので、ルーティングモードを切り替える必要がある場合や、IE 9のダウングレードでhashモードを使用する必要がある場合は、何の変動もありません.2.HTML 5 historyモードでは、router-linkはクリックイベントをブロックし、ブラウザがページを再ロードしないようにします.3.HTML 5 historyモードでbaseオプションを使用すると、すべてのtoプロパティを書く必要はありません(ベースパス).
Props

### to

<router-link to="home">Homerouter-link>

<a href="home">Homea>


<router-link v-bind:to="'home'">Homerouter-link>


<router-link :to="'home'">Homerouter-link>


<router-link :to="{ path: 'home' }">Homerouter-link>


<router-link :to="{ name: 'user', params: { userId: 123 }}">Userrouter-link>


<router-link :to="{ path: 'register', query: { plan: 'private' }}">Registerrouter-link>

replace

<router-link :to="{ path: '/abc'}" replace></router-link>

append
appendプロパティを設定すると、現在のパスの前にベースパスが追加されます.

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag
デフォルトはaラベルです.たとえば、ラベルとしてレンダリングしたい場合があります.

.そこでtag propクラスでどのラベルを指定するか、同じようにクリックを傍受し、ナビゲーションをトリガーします.

<router-link to="/foo" tag="li">foorouter-link>

<li>fooli>

active-class
デフォルトはrouter-link-activeで、リンクのアクティブ化時に使用するCSSクラス名を設定します.デフォルト値は、ルーティングのコンストラクションオプションlinkActiveClassによってグローバルに構成できます.
exact
デフォルトはfalseで、グローバルに拡張するかどうかです.
router-view
コンポーネントはfunctionalコンポーネントで、レンダリングパスが一致するビューコンポーネントです.レンダリングされたコンポーネントは、ネストされたパスに基づいてネストされたコンポーネントを内蔵することもできます.
Props
name
デフォルトはdefaultです.名前を設定すると、対応するルーティング構成のcomponentsの応答コンポーネントがレンダリングされます.
行動表現
他のプロパティ(router-viewで使用されていないプロパティ)は、レンダリングされたコンポーネントに直接渡され、各ルーティングのデータがルーティングパラメータに含まれることが多い.コンポーネントでもあるので、組み合わせて使用できます.2つを組み合わせて使用する場合は、内層で使用することを確認します.

<transition>
    <keep-alive>
        <router-view>router-view>
    keep-alive>
transition>

ルーティング情報オブジェクト
route objectは可変であり、ナビゲーションに成功するたびに新しいオブジェクトが生成されます.$route.path

  : string

   ，         ，         ，  "/foo/bar"。

$route.params

  : Object

動的クリップとフルマッチングクリップを含むkey/valueオブジェクト.ルーティングパラメータがない場合、空のオブジェクトです.$route.query

  : Object

   key/value   ，   URL     。  ，     /foo?user=1，   $route.query.user == 1，        ，      。

$route.hash

  : string

      hash   (  #) ，     hash  ，      。

$route.fullPath

  : string

       URL，        hash      。

$route.matched

  : Array

現在のルーティングのすべてのネストされたパスフラグメントのルーティングレコードを含む配列.ルーティングレコードはroutes構成配列のオブジェクトコピー(children配列もある)です.

const router = new VueRouter({
  routes: [
    //         route record
    { path: '/foo', component: Foo,
      children: [
        //      route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

URLが/foo/barである場合、$route.matchedは、上から下までのすべてのオブジェクト(コピー)を含みます.

$route.name

Router構造構成
Routerインスタンス
現在のルーティングの名前、もしあれば.