Vee Router学習

title:Vue Router学習date:2021-6-7 21:08:18 author:Xilong 88 tags:Vue
簡単な理解とまとめ:
Vue Routerはプラグインで、コンポーネントを組み合わせてアプリケーションを構成し、routesにcomponentsを追加することで、ルーティングの機能を実現することができます.
公式の例:
Vue Router公式サイト

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--    router-link      . -->
    <!--      `to`       . -->
    <!-- <router-link>           ``    -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-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')

//   ，       ！

これにより、linkをクリックすると、異なるコンポーネントをレンダリングできます.これにはいくつかのメリットがあります.1.コードが減りました.通常、私は新しいページを作成し、このページをこのページにジャンプさせ、異なるページのルーティングを実現するはずです.しかし、Vue Routerがあれば、コードを大幅に多重化することができます.このページでは別のコンポーネントをレンダリングし、リンクにリンクが変わり、ページも変わりましたが、実際には同じページです.これにより、多くのコードが省け、ユーザー体験がよくなります.
2.パフォーマンスが最適化されました.httpリクエストを送信するだけでなく、ページ全体のDOMロードを再レンダリングすることで、ページ全体をレンダリングするよりもVue Routerレンダリングコンポーネントの方がパフォーマンスが低下します.this.$routerは、ルータにアクセスすることもできるし、routerインスタンスの名前によって直接アクセスすることもできるが、各コンポーネントにrouterインスタンスを注入するよりも、this.$routerによって直接アクセス結合が低い.がルーティングに一致すると自動的に追加される.router-link-activeスタイル.
ダイナミックルーティングマッチング
パスパラメータは静的ではなく、いくつかのパラメータがあります.これらのパラメータは変化する可能性がありますので、動的パスパラメータを使用します.

const User = {
     
  template: '
User
'
}

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

このように、/user/fooおよび/user/barのように、同じルーティングにマッピングされるが、パラメータidが異なるだけで、this.$route.paramsを介してこのパラメータにアクセスすることができる.

const User = {
     
  template: '
User {
     { $route.params.id }}
'
}

すべてのパスパラメータはここparamsに配置されます.

               /user/:username/post/:post_id	
             /user/evan/post/123	
$route.params   {
      username: 'evan', post_id: '123' }

応答ルーティングパラメータの変化
/user/fooは/user/barにナビゲートし、元のコンポーネントインスタンスが多重化されます.両方のルーティングが同じコンポーネントをレンダリングするため、再作成を破棄するよりも多重化が効率的です.ただし、これは、コンポーネントのライフサイクルフックが呼び出されないことを意味します.
ルーティングパラメータの変化に応答するには、watchによって$routeオブジェクトの変化を監視する必要があります.

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

同様にナビゲーションガードによって実現することができ、これは後述する.

const User = {
     
  template: '...',
  beforeRouteUpdate(to, from, next) {
     
    // react to route changes...
    // don't forget to call next()
  }
}

ナビゲーションガード
すべてのルーティングまたは404 Not foundルーティングをキャプチャ

{
     
  //        
  path: '*'
}
{
     
  //      `/user-`        
  path: '/user-*'
}

ルーティング{path:'*'}は、通常、クライアント404エラーに使用される.
ワイルドカードを使用すると$route.paramsにはpathMatchというパラメータが自動的に追加されます.URLがワイルドカードで一致する部分が含まれています.

//        { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
//        { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

高度なマッチングモードは、より高度なマッチング方式、path-to-regexpを使用できます.
マッチング優先度は、同じパスで複数のルーティングをマッチングできる場合があります.この場合、マッチングの優先度は、ルーティングの定義順序に従います.ルーティングの定義が早いほど、優先度が高くなります.
ネストされたルーティング
router-viewはコンポーネントを表示するために使用されるので、router-viewとrouterをネストすることで、ルーティングをネストすることができます.
サブコンポーネントをchildrenプロパティに入れます.

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

親コンポーネントのテンプレートにrouter-viewを追加します

const User = {
     
  template: `
    

      
User {
      { $route.params.id }}
      
    
  `
}

ここでchildrenのpathは'/'を持つことができません.これはルートパスとして扱われるからです.
childrenの中のroutesも外のroutesも同じなので、多層ネストできます.
上記の例のように、アクセス/user/profileは応答しますが、存在しないサブルーティングにアクセスするとだめなので、空のサブパスを追加して応答することができます.

const router = new VueRouter({
     
  routes: [
    {
     
      path: '/user/:id',
      component: User,
      children: [
        //   /user/:id     ，
        // UserHome       User     
        {
      path: '', component: UserHome }

        // ...     
      ]
    }
  ]
})

プログラミング式のナビゲーションはrouter-linkをクリックすることによってナビゲーションするほか、routerを使用することもできる.pushインスタンスメソッド

router.push(location, onComplete?, onAbort?)

実際にrouter-linkをクリックすると、このメソッドが呼び出され、historyのスタックにレコードが追加されます.

//    
router.push('home')

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

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

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

pathが提供されるとparamsは無視され、queryはこの場合ではありません.ルーティングのnameまたは手書きの完全なパラメータ付きpathを提供する必要があります.

const userId = '123'

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

router.push({
      path: `/user/${
       userId}` }) // -> /user/123

//     params    

router.push({
      path: '/user', params: {
      userId }}) // -> /user

すなわち,name+paramsか,完全なpathを提供するか,paramsを自動的に解析し,pathとparamsがある場合,後者は無効である.queryはpathの後ろにリクエストパラメータを持って行きます.
router-linkのto属性も上記の原則によって制限されている.
オプションはrouterです.牙列缺损replaceでは、onCompleteとonAbortコールバックを2番目と3番目のパラメータとして提供します.これらのコールバックは、ナビゲーションが正常に完了した(すべての非同期フックが解析された後)または終了した(同じルーティングにナビゲートした場合、または現在のナビゲーションが完了する前に別の異なるルーティングにナビゲートした場合)に、対応するコールを行います.
3.1.0+では、2番目と3番目のパラメータを省略することができ、この場合Promise,routerがサポートする.牙列缺损replaceはPromiseを返します.
宛先が現在のルーティングと同じ場合、パラメータのみが変更されます(たとえば、あるユーザー情報から別の/users/1から/users/2に変更されます).この変更に応答するには、beforeRouteUpdateを使用します(ユーザー情報のキャプチャなど).

router.replace(location, onComplete?, onAbort?)

ロuterとpushは似ていますが、唯一の違いは、historyに新しいレコードを追加するのではなく、現在のhistoryレコードを置き換える方法名と同じです.
router-linkテープreplaceパラメータに相当:

router.go(n)

historyに基づいて前進または後退できます.

//            ，    history.forward()
router.go(1)

//       ，    history.back()
router.go(-1)

//    3    
router.go(3)

//    history      ，        
router.go(-100)
router.go(100)

Vue Routerのナビゲーション方法(push,replace,go)は,種々のルーティングモード(history,hash,abstract)で一致した.
これらの方法は実際に真似したwindowです.history、だから似ているように見えます.
名前付きルーティング
パスでルーティングを使用すると、不便な場合がありますので、nameを使用できます.

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

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

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

名前付きビュー
複数のコンポーネントが異なるrouter-viewにレンダリングされる場合があります.ビューに名前を付ける必要があります.

<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
      }
    }
  ]
})

これにより、対応するコンポーネントが対応するビューにレンダリングされます.
ネストされた名前付きビュー

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

Navは通常のコンポーネントにすぎない.

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
     
  path: '/settings',
  //                 
  component: UserSettings,
  children: [{
     
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
     
    path: 'profile',
    components: {
     
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

実際には、名前が一致しない場合、対応するrouter-viewはレンダリングされません.router-viewネストとネーミングビューを同時に使用できます.
リダイレクトとエイリアス
リダイレクト

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

/aにアクセスすると、/bにリダイレクトされます
リダイレクトのターゲットは、名前付きルーティングであってもよい.

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

さらに、リダイレクトターゲットを動的に返す方法もあります.

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

エイリアスアクセス/bとアクセス/aはまったく同じで、/bが/aのエイリアスに相当し、パス上は変わらないが、実際にはレンダリングされた/aのコンポーネントである.

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

ルーティングコンポーネントパラメータ
$routeとの結合の代わりに

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

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

    //            ，               `props`   ：
    {
     
      path: '/user/:id',
      components: {
      default: User, sidebar: Sidebar },
      props: {
      default: true, sidebar: false }
    }
  ]
})

propsがtrueに設定場合、route.paramsはコンポーネントプロパティに設定されます.
オブジェクトモード
propsがオブジェクトの場合、コンポーネントプロパティとしてそのまま設定されます.propsが静的である場合に役立ちます.

const router = new VueRouter({
     
  routes: [
    {
     
      path: '/promotion/from-newsletter',
      component: Promotion,
      props: {
      newsletterPopup: false }
    }
  ]
})

関数モード
関数を作成してpropsを返すことができます

const router = new VueRouter({
     
  routes: [
    {
     
      path: '/search',
      component: SearchUser,
      props: route => ({
      query: route.query.q })
    }
  ]
})

URL/search?q=vueは{query:‘vue’}を属性としてSearchUserコンポーネントに渡す
HTML 5 Historyモード
H 5は...pushStateメソッドは、ページを再ロードせずにURLジャンプを行い、modeをhistoryに変更します.

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

これはバックグラウンドを構成する必要があります.historyオブジェクトについて話したときに言及しました.
バックエンド構成の概略
404

const router = new VueRouter({
     
  mode: 'history',
  routes: [
    {
      path: '*', component: NotFoundComponent }
  ]
})

ステップナビゲーションガードルーティングメタ情報遷移動効データ取得スクロール動作ルーティング怠惰ロードナビゲーション障害
簡単に見て、使う準備をしてから細かく勉強します.