ルーティングとは

バックエンドルーティング:通常のウェブサイトに対して、すべてのハイパーリンクはURLアドレスであり、すべてのURLアドレスはサーバー上の対応するリソースに対応する.

フロントエンドルーティング:単一ページアプリケーションにとって、主にURLのhash(#番号)によって異なるページ間の切り替えを実現すると同時に、hashにはHTTP要求にhash関連の内容が含まれないという特徴がある.したがって、単一ページプログラムにおけるページジャンプは主にhashで実現される.

単一ページアプリケーションでは、hashの変更によってページを切り替える方法をフロントエンドルーティング(バックエンドルーティングとは異なる)と呼ぶ.

vueでvue-routerを使用する

vue-routerコンポーネントクラスライブラリのインポート:

import Router from 'vue-router'

router-linkコンポーネントを使用して

をナビゲート

   // tag        tag         
  

router-viewコンポーネントを使用して、一致するコンポーネント

を表示する.

コンポーネント

を作成する

  login.vue
  register.vue

ルーティングrouterインスタンスを作成し、routersプロパティによってルーティングマッチングルール

を定義する.

// 5.        router   ，   routers            
    var router = new VueRouter({
      routes: [
        { 
          path: '/login', 
          component: login
        },
        { 
          path: '/register', 
          component: register 
        }
      ]
    });

routerプロパティを使用してルーティングルール

を使用する

// 6.    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      router: router //    router                router
    });

ダイナミックルーティングマッチング
ルーティング・ルールでのパラメータの定義

ルールで定義されたパラメータ:

{ path: '/register/:id', component: register }

は、this.$route.paramsによってルーティング中のパラメータを取得する:

.

var register = Vue.extend({
      template: '
     --- {{this.$route.params.id}}
'
    });

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

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

または、2.2に導入されたbeforeRouteUpdateナビゲーションガードを使用する.

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

すべてのルーティングまたは404 Not foundルーティングをキャプチャ
通常のパラメータは、区切られたURLクリップの文字にのみ一致します.任意のパスを一致させるには、ワイルドカード(*):

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

ワイルドカードルーティングを使用する場合は、ルーティングの順序が正しいことを確認してください.つまり、ワイルドカードを含むルーティングは最後に置くべきです.ルーティング{ path: '*' }は、通常、クライアント404エラーに使用される.Historyモードを使用している場合は、サーバーが正しく構成されていることを確認してください.childrenプロパティを使用してルーティングネストを実現

  

    Account

    
  

  
    //        
    const account = Vue.extend({
      template: `<div>
          account  
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    //       login   
    const login = Vue.extend({
      template: '<div>    </div>'
    });

    //       register   
    const register = Vue.extend({
      template: '<div>    </div>'
    });

    //     
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, //    redirect        
        {
          path: '/account',
          component: account,
          children: [ //    children     ，        
            { path: 'login', component: login }, //   ，        ，    /    
            { path: 'register', component: register }
          ]
        }
      ]
    });

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  

ネーミングビュークラシックレイアウトの実装

ラベルコード構造:

JSコード:

    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    //       
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  

CSSスタイル: