単一ページのアプリケーション（SinglePageアプリケーション、SPA）
唯一のメインページの1つの適用、単に開始時間をロードする手段、およびその他の関連リソース。すべての内容は、機能モジュールの各成分について、メインページに含まれます。単一ページのアプリケーションのジャンプ、のみローカルリソースを更新し、関連するコンポーネントを切り替えることです。
js,css
複数ページのアプリケーション（マルチページアプリケーション、MPA）
各ページがロード繰り返す必要があり、複数の独立したアプリケーションのページを参照およびその他の関連リソースを。複数ページのアプリケーションをジャンプ、リソースは、ページ全体を更新する必要があります。
js,css
どちらの比較表：
| スパ | MPA | |
|---|---|---|
| 構造 | 多くのホームページ+モジュールアセンブリ | 多くの全ページ |
| 経験 | 高速のスイッチングページ、良い経験、時間があまりにも、必要性は、関連するチューニングを行うに際に、元のファイルがロードされます。 | ページが遅い、スーマン、特に悪い経験を切り替えると、 |
| リソースファイル | コンポーネントの共通リソースは一度だけロードする必要があります | 各ページは、独自のパブリックリソースをロードする必要があります |
| 該当シーン | 経験と流暢さを適用するための高い要求があること（SSRは、最適化のSEOを助けることができる）SEOを助長されていません | 敏感なアプリケーションSEOの要件に適し |
| トランジションアニメーション | Vueが簡単に実装するために、アセンブリの移行パッケージを提供します | 達成することは困難 |
| アップデート | ハンドオーバ関連のコンポーネント、すなわち、部分更新 | 全体的にHTMLの切り替え、高価な（繰り返しHTTPリクエスト） |
| ルーティングモード | あなたはハッシュを使用することができ、あなたは歴史を使用することができます | 通常のリンクジャンプ |
| データ転送 | （Vuex）のようなグローバル変数を使用して、単一のページので、 | そのようなスキーム、URLパラメータ、コール・インタフェース・保全をキャッシュとしてクッキー、のlocalStorage |
| 関連するコスト | 高いプリ開発コスト、継続的なメンテナンスが容易 | 関数は、多くの場所を変更する必要がありますので、低事前開発コスト、継続的なメンテナンスは、より厄介です |
フロントエンドルーティング：コアを達成するために、単一ページのアプリケーション
コアフロントエンドルート：バックエンドの観点から要求を変更しないいます。
二つのモードのVUE-ルータの経路についてここに私の話：hash&history
1、ハッシュモード
原理ハッシュパターンonhashchangeイベント。
-
window.addEventListener( hashchange ,function(e) { -
console.log(e.oldURL); -
console.log(e.newURL) -
},false);
プロパティの取得と設定値を。
window.location.hashhash
由于 hash 发生变化的 url 都会被浏览器记录下来，所以浏览器的前进后退可以使用，尽管浏览器没有请求服务器，但是页面状态和 url 关联起来。后来人们称其为前端路由，成为单页应用标配。
hash 模式的特点在于 hash 出现在 url 中，但是不会被包括在 HTTP 请求中，对后端没有影响，不会重新加载页面。
2、history 模式
利用了 HTML5 History Interface 中新增的
pushState()和replaceState()，它们提供了对历史记录进行修改的功能。
相关的 API:
history.pushState()
-
history.pushState(stateObj, title, url);
- state：一个与指定网址相关的状态对象，
popstate事件触发时，该对象会传入回调函数。如果不需要可填null。 - title：新页面的标题，但是所有浏览器目前都忽略这个值，可填
null。 - url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
例如：
history.pushState(new,new,new.html);
添加上面这个新记录后，浏览器地址栏立刻显示 ~/new.html，但并不会跳转到 new.html，它只是成为 history 中的最新记录。pushState 方法不会触发页面刷新，只是 history 对象变化，地址栏会变。
history.replaceState()
-
history.replaceState(stateObj, title, url);
参数同 pushState() 一样。
调用该方法，会修改当前的 history 对象记录， history.length 的长度不会改变
history.state
当前 URL 下对应的状态信息。如果当前 URL 不是通过 pushState 或者 replaceState 产生的，那么 history.state是 null。当需要 state 和 URL 同步时可以使用 replaceState() 使之同步。
popstate 事件
同一个文档的
history对象出现变化时，就会触发popstate事件。
不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发 popstate 事件，但 Firefox 则不会。
注意：调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 popstate 事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者调用 history.back()、history.forward()、history.go()方法)。