Vue——精講VueRouter(1)

11513 ワード

最近Boosに異動されて新人に訓練をして行って、今自分で整理したいくつかのものを分かち合って、みんなに役に立つことを望みます
demoソースアドレス:https://github.com/BM-laoli/BMlaoli-learn-VueRouter
この章はVueRouterフロントエンドルーティングの章の部分です
アウトライン
一、基本概念
ルーティングは、ネットワークを介してソースアドレスから宛先にメッセージを送信するアクティビティにマッピングテーブルが必要です.

ルーティング

情報の転送(コアは転送)

バックエンドルーティングとフロントエンドルーティング、バックエンドレンダリング、フロントエンドレンダリング
フロントエンドレンダリング(APIエコを前後に分離)、バックエンドレンダリング(viewネスト)
フロントエンドルーティングのコアコンセプトアドレスが変化したときurlを変更したときは,全体ページリフレッシュを行わない.
urlを変更してページをリフレッシュしない解決方法
urlジャンプアドレスを変更し、新しいページを取得する必要がありますが、ページのリフレッシュを望んでいません.
ソリューション1:locaion.hash = '/'
これはvueRouterの最下位実装です
hashの変化をリスニングし、Webデータの取得メカニズムを変更し、対応するコンポーネントをレンダリングします.
ソリューション2:H 5のhistrorayモード

pushState history.pushState({},','home')、3番目のパラメータはurl

です.
ここのpushは実際にはスタック構造(先進後出)であり、
ここで戻る必要があるとしたらback()弾桟を使います

history.pushState({},'','home'),
history.pushState({},'','about'),
history.pushState({},'','user'),

//          back()   
history.back(),
//    url  /about

repalceState

ここではpushの方法と似ていますが、back()では後足ボタンをクリックできません

history.repalceState({},'','user'),

ここでのgoはスタックに対する操作であり,go(-1)はgo(-2)が2つポップアップされる.
go(1)1個のgo(2)を2個押し込む

go(-1)

以上が基本的なフロントエンドルーティングの原理です
二、v-router基本使用
フロントエンドの3つのフレームワークには独自のrouterがあり、SPAアプリケーションの構築に使用できます.
ヒントを使用すると、非常に簡単です.

インストールしていない場合はnpm install vue-routerをインストールする必要があります

は、ルーティングオブジェクトを導入する、Vueを呼び出す.use(VueRouter)このルーティングプラグイン

をインストールする

ルーティングインスタンスを作成し、転送マッピング構成wxain

作成したルーティング

をvueインスタンスにマウントする.

1.ルーティングオブジェクトをインポートし、optionnをルーティングに設定する
/router/index.js


/**
 *          
 */
// 1.   
 import Router from 'vue-router'
 
 // 2.1   vue  
import Vue from 'vue'

//     
import Home from '../components/Home.vue'
import About from '../components/About.vue'


// 2.2    （  ），    ，vue   ，      ，Vue.use
Vue.use(Router)

// 3.        ，     Router            

// 4.        
const routes = []

const router = new Router({routes})

//4.   
export default router

2.ルーティングマッピングの構成
/router/index.js

const routes = [
 
 {path:'/home',component:Home},
 {path:'/about',component:About},

]

3.インスタンスでのルーティングの使用
/main.js

import Vue from 'vue'
import App from './App'
import router from './router'//         index.js

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//              
  render: h => h(App)
})

4.注意してください.私たちのルーティングポートにはリンクもあります.
/App.vue

次は私たちの2つのコンポーネントです.
/Home.vue




    export default {
        
    }

/About.vue




    export default {
        
    }

以上、私たちが非常に簡単に使用しています.
三、その他の知識点の補充
ルーティングのデフォルト値をmode=>hisaryモードに変更
デフォルトでは、トップページの解決方法を表示し、'/'をマッピングし、リダイレクト/indexを行うことを望んでいます.js

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

なぜhistoryに調整するのか?
newの時に指定するだけでいいです/index,js

const router = new Router({
  routes,
  mode:"history"//             
})

router-linkのプロパティ

tage toは属性で、デフォルトはaリンクにレンダリングされます.もし私が今buttmmにデフォルトでレンダリングする必要があるとしたらどうしますか?tagを1つ追加すればいい

変更モードreplceStatsブラウザがreplaceをロールバックすることを許可しないで加算すればいい

デフォルトのものを利用して、非常に便利な効果を得ることができます.

置換値:私たちはあまり長くないことを望んでいます.私たちは望んでいます.Activeでスタイルを変えることができますか?active-calssを追加すればいいです.これは直接acitveをクラスにすればいいです.

コードルーティングジャンプはリダイレクトを意味します
気をつけて!route != ルートを勉強している間にrouterは非常に重要なオブジェクトです
これは咲きの中でよく使われています.

// this.$router.push('        ')。
// this.$router.push('/home')
//             ，       
this.$router.replace('/home')

四、動的ルーティングパラメータ
ここでは理由伝達のアドレスバーの接合パターンを簡単に紹介しただけですが、もっと奇妙な伝達方法があります.詳細は公式Routerドキュメントを参照してください.

this.$router.parmas
//   parmas

ここではuserページをクリックすると、任意のルーティングパラメータが得られるようにする必要があります.
たとえば、現在/user/zhnsangでは、zhangshangを取得できます./user/lishiではlishiを取得できます.

まずルーティングに追加する必要があります:/router/index.js

   {
        path: "/user/:usermsg",
        component: User
    }
]

ページ転送データ/APP.vue

router-link :to="'/user/'+username">

export default {
name: 'App',
data() {
return {
username: 'lisi'
}
},
</code></pre>
<ol start="3">
<li>ページ取得データ</li>
</ol>
<blockquote>
<p>必ずrouerで定義されているものが別のルートから出てくることに注意してください</p>
</blockquote>
<p>/User.vue</p>
<pre><code class="language-html">
<template>
<div>
<h2>私はユーザー関連の専門です</h2>
<p>私はユーザーのメッセージに関するページです.へへへ</p>
<h1>{{ $route.params.usermsg }}44</h1>
<hr>
<h2>{{username}}</h2>
</div>
</template>
<script>
export default {
computed: {
username() {
return this.$route.params.usermsg
}
},
}
五、細部の詳細
気をつけて!もう一度route!=router
注意してください.ここの$routeは実際にmainの中のnewのRouterで得られ、このrouteオブジェクトは要求された場所によって変わります.すなわち、このrouteは現在のページのrouteオブジェクトであり、vueにはrouteインスタンスが1つしか存在しない
六、Vueのwebpackパッケージの詳細+ルーティングの怠惰なロード
vueプロジェクトの単純なパッケージディレクトリ構造分析
vueプロジェクトでは、簡単な3つのファイルがどのようにパッケージされているかを見てみましょう.
現在このような3つのファイルがあると仮定すると、私たちは彼らをパッケージ化する必要があります.mianは入り口で、addビジネスがあり、math依存モジュールがあります.では、私たちのwebpackがパッケージした3つのファイルはいったいどのように実行されているのでしょうか.
vueでwebpackを使ってパッケージ化すると、いくつかのものをモジュールにパッケージ化します.パッケージ化されたもののディレクトリ構造は以下の通りです.私たちが実際にパッケージ化するときはcss、jsを分けて、それぞれの役割を果たします.

| dist
| ---static
| ---css
| ---js
| -----app.XXXX.js         (            )
| -----manifest.xxxx.js    (              )
| -----vendor.xxxx.js      (       )
| idnex.html

ルートインロード

概念の理解

現在、私たちがパッケージ化している状況は、私たちのすべてのコードがappに集中しています.xxx.jsファイルの中で、このように実は后期のメンテナンスと开発に不利で、もし私达が多くの大量のコードがある时、私达のこのファイルはとても大きくなって、そこで、私达はルートの怠惰なロードが必要で、いわゆる怠惰なロードは:‘必要な时、やっとある资源のファイルをロードします’、ルートの怠惰なロード、各ルーティングに対応するビジネスロジックコードを、パッケージ化時に異なるjsファイルに分割し、必要に応じて要求する方法です.
このようなパッケージの怠惰なロードを経て、私たちのディレクトリはこのようになります.

| dist
| ---static
| ---css
| ---js
| -----0.xxx.js            (     home       )
| -----1.xxx.js             (     about       )
| -----app.XXXX.js         (            )
| -----manifest.xxxx.js    (              )
| -----vendor.xxxx.js      (       )
| idnex.html

の使用方法
使用は非常に簡単で、主に以下の3つの方法がありますが、私が一番好きなのはやはり最後の方法/rouetr/indexです.js

-   vue      webpack   ，     
const Home = resolve =>{ require.ensure(['../compenet/Home.vue'],()=>{
   resolve (require('../compenet/Home.vue'))
})}

- AMD     
const About = resolve =>{ require(['../compenent/About.vue'],resolve) }


- ES6          （   ）
const Home = () => import('../compenet/Home.vue')

実際の使用/router/index.js

/**
 *          
 */
// 1.   
import Router from 'vue-router'

// 2.1   vue  
import Vue from 'vue'

//     
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User'
const Home = () =>
    import ('../components/Home.vue')
const About = () =>
    import ('../components/About.vue')
const User = () =>
    import ('../components/User')


// 2.2    （  ），    ，vue   ，      ，Vue.use
Vue.use(Router)

// 3.        ，     Router            

// 4.        
const routes = [{
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: "/user/:usermsg",
        component: User
    }
]

const router = new Router({
    routes,
    mode: "history"
})

//4.   
export default router

//6.  main

七、ルートネスト
honeの下で/home/newがhomeの下のサブコンポーネントに行き、/home/messageが別のサブコンポーネントに行くことを望んでいます.

まずコンポーネント/components/HomeMessageが必要です.vue




    export default {
        name:"HomeMessage"
    }

/components/HomeNews




    export default {
        name:"HomeNews"
    }

ルーティング内に

を配置する.

const HomeNews = () =>
    import ('../components/HomeNews')
const HomeMessage = () =>
    import ('../components/HomeNews')


// 2.2    （  ），    ，vue   ，      ，Vue.use
Vue.use(Router)

// 3.        ，     Router            

// 4.        
const routes = [{
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        children: [{
                path: '',
                redirect: 'news'
            },
            {
                path: 'news',//            /home/news,            ，
                component: HomeNews
            },
            {
                path: 'message',
                component: HomeMessage
            },

        ]
    },
    {

打入口router-view(盲目の名前は実際にはルーティングのプレースホルダ)/Home.vue




    export default {
        
    }

ここでは状態の保持についてkey-aliveを使用する必要があります.後で詳しく説明します.

Vee----ルーティングの理解

mpvueウィジェットRate星スコア