[ヴュー]：ルーティング

その他 2019-06-24 06:07:49 訪問数: null

ルーティングとは何ですか

  1. 平均的なウェブサイトのために、すべてのハイパーリンクは、サーバに対応するリソースの全てに対応するURLアドレス、URLアドレスです。
  2. HTTPリクエストは、関連するコンテンツハッシュを含んでいない。アプリケーションのため、単一のページを単一ページのアプリケーションのために、主にハッシュ機能、つつ、URLのハッシュの異なるページ（＃番号）を切り替えることで実現メインページジャンプはハッシュを実装しました。
  3. ハッシュを変更することにより、ページを切り替えるには、このように単一ページのアプリケーションでは、ルート（後端異なる経路）のフロントエンドと呼ばれます。

VUEでVUE-ルータを使用します

ルートの基本的な使用は、以下のステップを含みます。

  • はじめにvue-router.js、あなたもすることができますnpmインストール後に再導入
  • テンプレートオブジェクトを作成します。
  • ルートオブジェクトを作成し、導入された場合にvue-routerパケットの後、windowグローバルオブジェクトは、と呼ばれるルート・コンストラクタが存在するVueRouter時に、newルート・オブジェクトの時間、コンストラクタが設定オブジェクトを渡すことができます。コンフィギュレーション・オブジェクトがroutes表すルーティング・マッチング・ルールを、各ルーティングルール、2つの必須属性を持つオブジェクトは、このルールの目的です。
    • pathこれは、ルーティングリンクアドレスをリッスンを表し、
    • component彼は、ルートが前方に一致した場合と言っpath、次に表示component：注意、対応するコンポーネントのプロパティのcomponentプロパティ値は、テンプレートオブジェクトのコンポーネントである必要があり、構成要素の名前を参照することができません。
  • router: routerObjURLの変化を監視し、そして、対応する部品を表示するために使用されるルーティングルールオブジェクト、登録VMインスタンス
  • router-viewされvue-router、具体的プレースホルダとして使用される要素、コンポーネントルーティングルールに一致するように、将来的に一致するように、表示コンポーネントを提供し、これがために表示されますrouter-view行きます
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <router-view></router-view>
  </div>

  <script>
    var login = {
      template: '<h3>登录组件</h3>'
    }

    var register = {
      template: '<h3>注册组件</h3>'
    }

    var routerObj = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    })
    var vm = new Vue({
      el: '#app',
      router: routerObj
    })
  </script>
</body>

</html>

公式には、推奨router-linkするのではなく、<a>コンポーネントのナビゲーションを行います

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

router-link描画するデフォルトaのラベル、あなたができるtag属性は、レンダリングされる要素を指定します

<router-link to="/login" tag="span">登录</router-link>

あなたは、することができ/、指定されたコンポーネントをログに記録するようにマッピングされました

{ path: '/', component: login }

推奨redirectリダイレクション

{ path: '/', redirect: '/login' }

デフォルトルートが活性化され、アプリケーションのrouter-link-activeスタイル、スタイルの変更がハイライトに定義することができます

.router-link-active {
    color: red;
    text-decoration: underline;
}

デフォルトのスタイルを変更するには、コンストラクタは、属性によって再ルーティングすることができるlinkActiveClass適用されるカスタムスタイルを指定します

var routerObj = new VueRouter({
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
    ],
    linkActiveClass: 'myactive'
})

使用：アニメーション経路切り替えが提供されているtransitionラベルを包みrouter-view、と定義するv-enter, v-leave-to, v-enter-active, v-leave-activeことで、スタイルをmodeプロパティスイッチングモードアニメーション

<transition mode="out-in">
    <router-view></router-view>
</transition>

ルーティングルールにパラメータを渡します

  • 1.1ルーティングに渡されたクエリ文字列パラメータを使用して、ルーティングを変更する必要はルールpathのプロパティを
<router-link to="/login?id=10&name=zs">登录</router-link>
  • 1.2サブアセンブリthis.$route.query.属性名収集パラメータ
var login = {
    template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>'
}
  • 2.1 :ルーティングルールにパラメータを渡すためのプレースホルダは、変換する必要があります
{ path: '/login/:id/:name', component: login }
  • 2.2送信パラメータは、のように書くことができます。
<router-link to="/login/12/zs">登录</router-link>
  • 2.3サブアセンブリthis.$route.params.属性名収集パラメータ
var login = {
    template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>'
}

使用するchildrenネストされたプロパティは、ルーティングを実装

  • 使用childrenサブルーティングを達成するためのプロパティ、副経路ながらpath前に、取ることはありません/、それ以外の場合は、ルート要求を開始します。
<div id="app">
  <router-link to="/account">Account</router-link>
  <router-view></router-view>
</div>

<template id='tmpl'>
  <div>
    <h3>Account组件</h3>
    <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  var account = {
    template: '#tmpl'
  }

  var login = {
    template: '<h4>登录组件</h4>'
  }

  var register = {
    template: '<h4>注册组件</h4>'
  }

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

  var vm = new Vue({
    el: '#app',
    router
  })
</script>

名前付きの古典的なレイアウトビューを達成

  • ルートは以前のマッチルールを学んだ{ path: '/', component: header }一経路に嵌合したときにコンポーネント、およびルーティングおよびアセンブリを示す表さ。
  • することでcomponents、あなたの点に注意し、多くの関係ルーティングとアセンブリを指定することができますcomponents代わりにcomponent。タグの属性に未来を表すアセンブリのショー。何も存在しない場合、属性は、表示され、対応するコンポーネントのプロパティを。
    router-viewnamerouter-viewnamecomponentsdefault
  1. htmlコードの構造：
<div id="app">
  <router-view></router-view>
  <div class="container">
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
  </div>
</div>
  1. JSコード：
<script>
  var header = {
    template: '<h1 class="header">Header头部区域</h1>'
  }

  var leftBox = {
    template: '<h1 class="left">Left侧边栏区域</h1>'
  }

  var mainBox = {
    template: '<h1 class="main">mainBox主体区域</h1>'
  }

  var router = new VueRouter({
    routes: [
      {
        path: '/', components: {
          'default': header,
          'left': leftBox,
          'main': mainBox
        }
      }
    ]
  })

  var vm = new Vue({
    el: '#app',
    router
  })
</script>
  1. CSSスタイル：
<style>
  html,
  body {
    margin: 0;
    padding: 0;
  }

  .header {
    background-color: orange;
    height: 80px;
  }

  h1 {
    margin: 0;
    padding: 0;
    font-size: 16px;
  }

  .container {
    display: flex;
    height: 600px;
  }

  .left {
    background-color: lightgreen;
    flex: 2;
  }

  .main {
    background-color: lightpink;
    flex: 8;
  }
</style>

watchプロパティの使用

watch物事はdata指定されたデータに変更します

FIRSTNAMEを入力する最初のテキストボックス、LASTNAMEを入力するための第2のテキストボックス、第3の出力テキストボックスフルネーム、HTML以下の構造

<div id="app">
  <input type="text" v-model="firstname"> + 
  <input type="text" v-model="lastname"> = 
  <input type="text" v-model="fullname">
</div>

使用するwatchプロパティを監視することができdata、データで指定された変更をした後、トリガーwatchに対応するfunctionハンドラを。

var vm = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: '',
    fullname: ''
  },
  watch: {
    'firstname': function () {
      this.fullname = this.firstname + '-' + this.lastname
    }
  }
})

ことに注意してくださいwatch場合はプロパティが無料で-コンテンツがあれば、可能な単一引用符なしで-次のように単一引用符であることを、この関数は省略することができます。

firstname() {
  this.fullname = this.firstname + '-' + this.lastname
}

また、監視機能は、2つのパラメータ受け入れることができ(newValue, oldValue)、それぞれ、そのため、変更後の値、および変更前の値にthis.firstnameすることができnewValue、使用しない場合、置換oldValueパラメータを記述することができません、oldValue

firstname(newValue, oldValue) {
  this.fullname = newValue + '-' + this.lastname
}

変更モニタルートオブジェクト

ルート変更の監視、実際には、それが監視することでthis.$route.path特性の変化を

'$route.path': function(newValue, oldValue) {
  if (newValue == '/login') {
    console.log('欢迎进入登录页面')
  } else {
    console.log('欢迎进入注册页面')
  }
}

computed計算されたプロパティを使用します

  • computed呼ばれているプロパティの数、で定義することができる計算財産、財産の性質計算方法ですが、私たちは、これらの計算の属性を使用する場合、その名前は、プロパティとして直接使用されるべきである。コンピューティング入れていません呼び出す方法としての性質は、あるため、もののdataに含まれていないfullnameプロパティが、htmlまだラベルを使用することができますv-modelバインディングcomputed計算属性プロパティをfullname
  • プロパティを計算するために参照する場合は、追加してはならない()十分な通常のようにそれを使用するプロパティに直接呼び出すこと
  • 限り計算属性として、このfunctionいずれかの内部に、使用dataデータが変更された、それはすぐにプロパティの計算値を再計算します。
  • 属性の計算は、直接次の時間にキャッシュされている評価し、属性の計算方法は、任意のデータ参照が切り替わっていない場合、それは再計算特性評価ではありません。
var vm = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: ''
  },
  computed: {
    'fullname': function(){
      return this.firstname + '-' + this.lastname
    }
  }
})
  • それは定義があるgetterとsetterの特性の計算を：
<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
</div>

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'jack',
            lastName: 'chen'
        },
        methods: {
            changeName() {
                this.fullName = 'TOM - chen2';
            }
        },
        computed: {
            fullName: {
                get: function () {
                    return this.firstName + ' - ' + this.lastName;
                },
                set: function (newVal) {
                    var parts = newVal.split(' - ');
                    this.firstName = parts[0];
                    this.lastName = parts[1];
                }
            }
        }
    });
</script>

watch、computedそしてmethods間のコントラスト

  1. computed結果は、唯一の再計算に依存しない限り、属性の変更が応答属性が、キャッシュされています。使用する主なプロパティ。
  2. methodsこの方法は、特定の操作、メイン書き込みのビジネスロジックを表します。
  3. watchオブジェクトキーは、コールバック関数に対応する値を観察する必要性の表現です。主に、それによって特定のビジネスロジック動作を行う、データの特定の変化を監視するために使用され、それは考えることができcomputed、およびmethodsそれらの組み合わせ。

おすすめ

転載: www.cnblogs.com/moon1992/p/11075020.html
おすすめ
Open Source Daily | Chrome に組み込まれている Gemini の重要性は、中国の AI 追求に関する 5 つの大きな誤解ではありません。ECharts の創設者は魚を育てるために「海に行った」が、何もありません。驚き
中国のAIチームが「米国のために準備を進めている」という噂にマイクロソフトが反応
ランキング
配列内の重複要素を検索し、繰り返し回数の最小値から最大値までの順に並べ替えます es6
【C++学習記】Ten、C++デザインパターン - 抽象ファクトリーパターン
知人：素人の言語ランタイム（A）に
ist „collision.relativeVelocity.magnitude“ in Unity
Linuxダイナミックリンク（3）のPLTとGOTについて話す-パブリックGOTエントリ
leetcode。図L.207カリキュラム-Java
羅区[] P3518 [POI2011] SEJ、金庫
MySQL にクエリを実行するときに使用するインデックスを指定します
現在のユーザー環境変数とシステムのWin10ベースのビュー
十二の仕事 - あなたの誕生日
アーカイブ
もっと
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

コードワールド

© 2018 codetd.com