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

この記事では、主に 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 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   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 をクリックすると、以下の青いルートの内容が変化します。

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

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

関連する推奨事項:

nginx_lua ケース分析: 動的ルーティングの実装

以上がvue ルーターの動的ルーティングとネストされたルーティングの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。