vue ルーターの動的ルーティングとネストされたルーティングの例の詳細な説明-jsチュートリアル-php.cn

vue ルーターの動的ルーティングとネストされたルーティングの例の詳細な説明

小云云

リリース： 2018-02-03 14:45:32

オリジナル

3285 人が閲覧しました

この記事では、主に Vue Router の動的ルーティングとネストされたルーティングについて詳しく紹介します。ご興味があれば、ぜひご覧ください。

まず、動的ルーティングを紹介しましょう。私の理解によれば、動的ルーティングとは、ページにジャンプできることを意味します。例: 次のページ:

<template> 
 <p id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </p> 
</template>

ログイン後にコピー

/hello をクリックすると、対応するモジュールが router-view にロードされます。、ルーティングに設定されたモジュール。

import Vue from &#39;vue&#39; 
import Router from &#39;vue-router&#39; 
import Hello from &#39;@/components/Hello&#39; 
import Foo from &#39;@/components/Foo&#39; 
import Foo2 from &#39;@/components/Foo2&#39; 
import Foo3 from &#39;@/components/Foo3&#39; 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: &#39;/&#39;, redirect: &#39;/hello&#39;}, 
  { 
   path: &#39;/hello&#39;, 
   component: Hello, 
   children: [ 
    {path: &#39;/hello/foo&#39;, component: Foo}, 
    {path: &#39;/hello/foo2&#39;, component: Foo2}, 
    {path: &#39;/hello/foo3&#39;, component: Foo3} 
   ] 
  }, 
  { 
   path: &#39;/cc&#39;, 
   name: &#39;Foo&#39;, 
   component: Foo 
  } 
 ] 
})

ログイン後にコピー

つまり、Hello と Foo の 2 つのコンポーネントにジャンプします。

それでは、ネストされたルーティングは何を意味するのでしょうか? 最初は次のように考えました: 2 つのルート /hello/foo と /hello/foo2 はネストされたルーティングと省略できますが、実際にはそうではありません。ネストされたルーティングは、コンポーネントを子コンポーネント内に再度ネストするだけです。次に、ルーティングを使用してジャンプします。これにより、ジャンプ時に子コンポーネントのみが変更され、外側の親コンポーネントは変更されません。

以下に完全な例を掲載しますので、ご覧ください:うえ

<template> 
 <p id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </p> 
</template> 
 
<script> 
export default { 
 name: &#39;app&#39; 
} 
</script>

ログイン後にコピー

Hello.vue

<template> 
 <p> 
  <h1>3434234343</h1> 
 </p> 
</template> 
 
<script> 
 export default { 
  name: &#39;Foo&#39;, 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>

ログイン後にコピー

ルーティング:

<template> 
 <p> 
  <h1>this is Foo2</h1> 
 </p> 
</template> 
 
<script> 
 export default { 
  name: &#39;Foo2&#39;, 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>

ログイン後にコピー

App.vue と Hello.vue の両方にページのスクリーンショットを撮りました:

このインターフェースでは、上部にある / または /hello または /cc をクリックすると、赤いルートのコンテンツが変化します。 /hello/foo /hello/foo2 /hello/foo3 をクリックすると、以下の青いルートの内容が変化します。

これは、日常のアプリケーションと非常によく似ています。最外層での変化、または局所的な変化はありますが、グローバルな変化が起こることは望ましくありません。

同時に、これはモジュール性にも準拠しており、各モジュールは異なるモジュールにあります。