vueルーティングは、複数のrouter-linkを遍歴して生成する例である。

業務シーン：Vue-cliを使ってspaを作ります。
需要：トップナビゲーションバーは下の内容バーを制御して、ページ内の切り替えを実現します。
間違いなく、vue-routerはこのような需要に適しています。実現も複雑ではありません。
1、main.js：

import VueRouter from 'vue-router'
Vue.use(VueRouter);

2、定義（ルート）コンポーネント：

import songList from './components/songList.vue'
 
const Bar = { template: '<div>no.2</div>' }
const Baz = { template: '<div>no.3</div>' }
const Fun = { template: '<div>no.4</div>' }

ここのコンポーネントは外部からも導入できます。つまり正しいやり方です。ブロガーはプレゼンテーションのために直接に中に書いています。
3、ルートを定義する：

const routes = [
 { path: '/  ',
 component: songList
 },
 { path: '/  ',
 component: Bar
 },
 { path: '/  ',
 component: Baz
 },
 { path: '/  ',
 component: Fun
 },
 { path: '*',
 redirect: '/  '
 }
]

最後にリダイレクトルーティングが設定されています。目的は、パスが上記のいずれかに該当しない場合、「新曲」ページに一致することです。つまり初期ページのルートを設定します。
4、routerを作成する例：

const router = new VueRouter({
 routes//  routes: routes
})

5、ルートの作成とマウントの例：

new Vue({
 router,
 el: '#app',
 render: h => h(App)
})

navBar.vue：
コンポーネントのページでは、通常通りにそれぞれ具体的な数のナビゲーションタグを書くべきです。

<router-link to="/  ">  </router-link>
<router-link to="/  ">  </router-link>
<router-link to="/  ">  </router-link>
<router-link to="/  ">  </router-link>

しかし、実際の運用には小さな問題があります。このように重複した形のルートの入り口は本当に全部書く必要がありますか？唯一の違いはト属性だけですか？
もし今後十何個か二十個があったらどうすればいいですか？
そこで、複数のルートエントリを生成するために配列を巡回することを試みる。

<span v-for="(bar, index) in title" :key="index">
 <router-link to="">
 {{ bar }}
 </router-link>
</span>

大体上述のように、titleはすべての名目の配列である。「新曲、ランキング、歌手、…」、Indexはkey値を結びつけるために用いられる。今唯一の問題はtoというルートの入り口の経路はどう書くべきですか？
それぞれが違う出口にレンダリングされますので、絶対パスは作成できません。
方案の1：main.jsの中の経路をすべてtitleの中の名称に変えて、またtoの中でつなぎ合わせ文字列で動的なマッチングを実現します。
実際に操作してみると、好ましくないことが分かりました。これはto="の中の二重引用符の内容だけを識別することができます。さらに「+」のようなjsでしか認識できないスティッチング記号を使用することができません。
方案二：プログラミングナビゲーションを使って、

methods: {
 linkChange: function (bar) {
  this.$router.push({ path: '/'+bar});
 }
 }

<span v-for="(bar, index) in title" :key="index">
 <router-link to="" @click.native="linkChange(bar)">
 {{ bar }}
 </router-link>
</span>

この方法は、経路をmethodsに書くと、巡回配列毎に得られた値を使用して、動的整合を実現することができる。
なぜclickイベントにnative拡張子を付けますか？
ここは典型的なrouter-linkのピットです。ブラウザはrouter-linkをaタグにレンダリングするので、router-linkに追加されたイベントは無効になります。
解决案は.nativeのサフィックスを加えて原生事件を阻止することです。
しかし、この方法は非常に深刻なバグがあります。つまり、巡回中にプログラムナビゲーションを使って、すべての入り口がこのクリックイベントに応答することになります。
具体的には、ユーザーがルートをクリックすると、すべての入り口がVueによって選択されたルートとして認識され、ページの論理が見えなくなる可能性があります。
しかし、このようなvueを追加すると、現在のルーティングにデフォルトで追加されているclassに背景色を設定して、すべてのルートの入り口要素を発見することができます。
一緒に色を変えましょう
このバグは使用しないで巡回して、順次にspanにルートを設ける時現れないで、具体的な原因は大神が教えてくれることができることを望みます。
この案も放棄するしかないです。
シナリオ3:
htmlにto属性をバインドし、

<span v-for="(bar, index) in title" :key="index">
 <router-link :to="{ path: '/'+bar }">
 {{ bar }}
 </router-link>
</span>

複雑な案を考えすぎて、最も基本的なバインディングto属性を無視しました。
一番便利なところは、大括弧の中には私のようにフルコースを書いてもいいし、直接に書くこともできます。
また、前の方法に比べて、追加のクリックイベントを省き、その独自の経路特性を利用して行うことができる。
今までの需要は基本的な完成と言えますが、細かいところはもっと完璧にできますか？
この例では、aラベルにレンダリングされたrouter-linkをspanタグで包んでいます。選択したいラベルのフォントが青色になり、spanの下に青い枠ができます。
ユーザー体験を高める。では、router-link-activeを使って、aラベルの色を変えるのが一番便利です。問題は前のレベルのspanはどのようにスタイルを追加するべきですか？
追加のクラスやIDを追加しないと機能しないようですが、vue公式サイトでこのような言葉を見ました。「アクティブ時のCSSクラス名」は外側の要素に適用されます。「a」タグ自体ではなく、「router-link」で外側の要素をレンダリングして、内部層の原生ラベルを包むことができます。コ-ドは以下の通りです。 ＜router-link(=「span」)：to=「{path:bar]」v-for=「(bar，index)in title」：key=「index」 <a> {bar} </a> </router-link>ラベルを使ってレンダリング要素を変えて、a labelを包む。これによリ.router-link-activeにspan besの枠を追加します。router-link-active aはフォ-トの色を変えます。追加のマ-カ-を使う必要があるのに、スタ-ルの要求ができます。以上のこのvuel toは、複数のrouter-linkを遍歴して生成した例は、小編集集が皆さんに提供した内容の全部です。参考にしてください。よろしくお願いします。