ルーティングとは

ルーティングは、より抽象的な概念であり、一言で言えば、ルーティングは、"要求の分布 "であり、ルーティングは、異なる要求を介してすることができ、ユーザーが別のURL、別のポートにアクセスします。

現在では一般的に、ハッシュ、ヒストリー、メモリーの3種類のルートが使用されています。

hash

hashはwindow.location.hashを通してパスを取得し、hashchangeを通してパスの変更をリッスンします。

欠点：

1. ハッシュを使用すると、#以降のコンテンツがサーバーにアップロードされないため、SEO的に不利になります。

history

欠点

1. すべてのフロントエンドのルートを同じページにレンダリングするために、バックエンドの協力が必要です。
2. IE8以下のブラウザには対応しておりません。

memory

ハッシュやヒストリーとは異なり、メモリはルーティングのためにlocalStorageにパスを保存する必要があります。

欠点

1. メモリはurlでパスを保存しないので、他の人とページを共有しても、その人はホームページにしか行けません。

VueRouter をラップするjsファイルを作成します。

まず、VueRouterを公式サイトサイトからインストールします。

1. vueファイルに、linkタグとviewタグを記述します。

<template>
 <div>
 <router-link to="/child"> to child</router-link>
 <router-link to="/child2"> to child2</router-link>
 <router-view></router-view>
 </div>
</template>

1. ルーティングテーブルを設定して

import Vue from 'vue'
import VueRouter from 'vue-router'
import child from "../components/child"
import child2 from "../components/child2"
Vue.use(VueRouter)
const routes = [
 {path:'/child' , component: child},
 {path: '/child2',component: child2},
 {path: '/',components: child}
]
const router = new VueRouter({
 routes
})
export default router

1. ルーターをマウントします。

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