Vueルート

Vueルート
SPAは何ですか
単一ページのWebアプリケーション(single page appration,SPA)は、一つのWebページだけのアプリケーションであり、単一のHTMLページをロードし、ユーザーとアプリケーションがインタラクティブな場合には、このページを動的に更新するWebアプリケーションです.
単一ページアプリケーション:ページを読み込むのは初めてです.以降は要求毎に必要なデータだけを取得します.そして、ページ内のjsで解析して取得したデータは、ページ内の伝統的な多ページアプリケーションに展示されます.従来の多ページアプリケーションにとっては、サーバに要求するたびに完全なページに戻ります.
利点は要求体積を減らし、ページ応答速度を速め、サーバへの圧力をより良いユーザー体験を低減し、ユーザーにウェブアプリでnative appの流暢さを感じさせる.
SPAは構想と技術点を実現します.
1 ajax 2アンカーポイントの使用(window.locations.hash change)3 hash changeイベントwindow.addEventListener(「hashchange」、function(){}4傍受ポイント値の変化のイベントは、それぞれのアンカーポイント値によって、該当するデータ5が本来はページ内のジャンプとして使用されています.
ルートの考え方
1、Vue.vue-routerを導入するjs依存性を確保する2、まず定義コンポーネント(つまり、異なるページ効果を示す)を必要とする3、異なるコンポーネントを一つの容器に入れる必要がある(ルートセット)4、ルートセットをルータ5に組み立てる、Vueインスタンスにルーティングをマウントする6、定義アンカーポイント7、ジャンプ
依存ライブラリをインポート

1 
2 

カスタムコンポーネントを します. えば、HomeとAbortコンポーネントです.
extedはコンポーネントを するシンタックスです.パラメータをあげます. はコンポーネントをあげます.そして、このコンポーネントはVue.com mponentというグローバル に ちます.また、 のvueテンプレートにcarコンポーネントを ってもいいです.
の でコンポーネントを して することもできます. も じです.コンポーネントを するvar Buton Counter=Vue.com mponent('button-counter')//コンポーネントを

1 const Home = Vue.extend({
2                     template: '
  
    
'
3                 });
4         
5       const Abort = Vue.extend({
6                     template: '
    
    
'
7                 });

urlとコンポーネントのマッピング を します.(コンビネーションルーティング) 
ルートパス"/"

 1 let routes = [
 2                     {
 3                         path:'/',
 4                         component:Home
 5                     },{
 6                         path:'/Home',
 7                         component:Home
 8                     },{
 9                         path:'/Abort',
10                         component:Abort
11                     },
12                 ]

ルータのインスタンスを して、 を します.
routeとrouterの いroute:ルートrouter:ルータルータには のルートが まれています.

1 const router = new VueRouter({routes})                

ルートインスタンスを してマウントします.

1 new Vue({
2             el:'#app',
3             router,
4             data:{                
5             }            
6         })        

:

1  var vm = new Vue({router: router}).$mount('#app'); 

router-link
ト
ルートのリンクを します.
replace
replace を すると、クリックするとrouter.replace()を び します.router.pushではなく、ナビゲーション はhistory を しません.

1   
2     

コード:

 1 
 2 
 3     
 4         
 5         
 6         
 7         
 8     
 9     
10         

11               
12                 
13             
14         
        
15     
16     
<span style="color:#008080;">17</span>         <span style="color:#008000;">/*</span><span style="color:#008000;">      </span><span style="color:#008000;">*/</span>
<span style="color:#008080;">18</span>         <span style="color:#0000ff;">const</span> Home =<span style="color:#000000;"> Vue.extend({
</span><span style="color:#008080;">19</span>                     template: '<div><p>  </p><div>    </div></div>'
<span style="color:#008080;">20</span> <span style="color:#000000;">                });
</span><span style="color:#008080;">21</span>         
<span style="color:#008080;">22</span>                 <span style="color:#0000ff;">const</span> Abort =<span style="color:#000000;"> Vue.extend({
</span><span style="color:#008080;">23</span>                     template: '<div><p>    </p><div>    </div></div>'
<span style="color:#008080;">24</span> <span style="color:#000000;">                });
</span><span style="color:#008080;">25</span>                 <span style="color:#008000;">/*</span><span style="color:#008000;">   url        (    ) </span><span style="color:#008000;">*/</span>
<span style="color:#008080;">26</span>                 let routes =<span style="color:#000000;"> [
</span><span style="color:#008080;">27</span> <span style="color:#000000;">                    {
</span><span style="color:#008080;">28</span>                         path:'/'<span style="color:#000000;">,
</span><span style="color:#008080;">29</span> <span style="color:#000000;">                        component:Home
</span><span style="color:#008080;">30</span> <span style="color:#000000;">                    },{
</span><span style="color:#008080;">31</span>                         path:'/Home'<span style="color:#000000;">,
</span><span style="color:#008080;">32</span> <span style="color:#000000;">                        component:Home
</span><span style="color:#008080;">33</span> <span style="color:#000000;">                    },{
</span><span style="color:#008080;">34</span>                         path:'/Abort'<span style="color:#000000;">,
</span><span style="color:#008080;">35</span> <span style="color:#000000;">                        component:Abort
</span><span style="color:#008080;">36</span> <span style="color:#000000;">                    },
</span><span style="color:#008080;">37</span> <span style="color:#000000;">                ]
</span><span style="color:#008080;">38</span>                 <span style="color:#008000;">/*</span><span style="color:#008000;">              </span><span style="color:#008000;">*/</span>
<span style="color:#008080;">39</span>                 <span style="color:#0000ff;">const</span> router = <span style="color:#0000ff;">new</span><span style="color:#000000;"> VueRouter({routes})                
</span><span style="color:#008080;">40</span>         <span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
</span><span style="color:#008080;">41</span>             el:'#app'<span style="color:#000000;">,
</span><span style="color:#008080;">42</span> <span style="color:#000000;">            router,
</span><span style="color:#008080;">43</span> <span style="color:#000000;">            data:{
</span><span style="color:#008080;">44</span>                 msg:'Hollo Vue!!!'
<span style="color:#008080;">45</span> <span style="color:#000000;">            }
</span><span style="color:#008080;">46</span>             
<span style="color:#008080;">47</span> <span style="color:#000000;">        })        
</span><span style="color:#008080;">48</span>     
49 

転載先:https://www.cnblogs.com/xcn123/p/11396654.html