1、前端路由
后端路由：多頁面，服務器端渲染好返回給瀏覽器。
前端路由：改變url不向服務器發送請求；前端可以監聽url變化；前端可以解析url並執行相應操作。
前后端分離：后端只提供API來返回數據，前端通過ajax獲取數據后，在通過一定的方式渲染到頁面上。
SPA：前后端分離+前端路由。
SPA只有一個html文件，整個網站的所有內容都在這一個html里，通過js來處理。
2、vue-router
路由不同的頁面實時上就是加載不同的組件。
3、示例
github地址：https://github.com/MengFangui/VueRouter
需要安裝vue-router
（1）加載插件
import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './app.vue'; //加載vue-router插件
Vue.use(VueRouter);
注意：from后的模塊都是小寫。
（2）路由設置
// 路由配置,配置路由匹配列表 //webpack會把每一個路由打包為一個js文件，在請求該頁面時，加載這個頁面的js，異步實現懶加載（按需加載）
const Routers = [ { //匹配的路徑
path: '/index', // meta: { title: '首頁' }, //映射的組件
component: (resolve) => require(['./views/index.vue'], resolve) }, { path: '/about', meta: { title: '關於' }, component: (resolve) => require(['./views/about.vue'], resolve) }, { //路由到同一個頁面，數據不同
path: '/user/:id', meta: { title: '個人主頁' }, component: (resolve) => require(['./views/user.vue'], resolve) }, //訪問的路徑不存在時，重定向到首頁。
{ path: '*', redirect: '/index' } ]; const RouterConfig = { // 使用 HTML5 的 History 路由模式，通過‘/’設置路徑
mode: 'history', routes: Routers }; const router = new VueRouter(RouterConfig);
注意：path屬性值后有'/'.
component: (resolve) => require(['./views/user.vue'], resolve)
resolve實現異步加載，按需加載。
命名路由使用：
{ //匹配的路徑
path: '/index', //常量參數定義
meta: { title: '首頁' }, //命名路由
name:'index', //映射的組件
component: (resolve) => require(['./views/index.vue'], resolve) }
<router-link :to="{name:'about'}">跳轉到 about</router-link>
命名路由的配置好處是：路徑都在main.js中配置好了，改變路徑的話只需要在main.js中配置即可，不需要在所有使用的地方進行配置。
（3）將將每個頁面的樣式都打包到一個css文件，webpack.config.js
plugins: [ //css單獨打
new ExtractTextPlugin({ filename: '[name].css', //將每個頁面的樣式都打包到一個css文件
allChunks: true }) ]
（4）配置webpack-dev-server支持history路由
"scripts": { "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js", "bulid": "webpack --progress --hide-modules --config webpack.prod.config.js" },
--history-api-fallback 所有的路由都指向index.html
（5）掛載路由組件
<template>
<div>
<router-view></router-view>
</div>
</template>
<script> export default { } </script>
（6）跳轉
方式1：
<template>
<div>
<h1>首頁</h1>
<!--router-link會渲染為一個a標簽 實現跳轉的方式1-->
<!--router-link 的tag屬性 指定渲染成什么標簽-->
<!--router-link 的replace屬性 不會留下history記錄，不能使用后退鍵-->
<!--router-link 的active-class屬性 路由匹配成功時會自動給當前元素設置為一個名為router-link-active的class-->
<router-link to="/about">跳轉到 about</router-link>
</div>
</template>
<script> export default { } </script>
to是一個屬性，同樣可以使用v-bind進行動態設置。如：
<router-link :to="{name:'about'}">跳轉到 about</router-link>
方法二：
<template>
<div>
<h1>介紹頁</h1>
<button @click="handleRouter">跳轉到 user</button>
</div>
</template>
<script> export default { methods: { handleRouter () { //實現跳轉的方式2
this.$router.push('/user/123'); //不會向history添加新紀錄
//this.$router.replace('/user/123');
//在hsitory中前進或者后退多少步
this.$router.go(-1); } } } </script>
（7）導航鈎子
//導航鈎子，beforeEach路由改變前觸發 //to形參 即將進入的路由對象 //from 即將離開的路由對象 //next 調用改方法后才能進入下一個鈎子，設置為false時，可以取消導航，設置為具體路徑時可以導航到指定的頁面next(‘/login’)
router.beforeEach((to, from, next) => { window.document.title = to.meta.title; next(); });
//導航鈎子，afterEach路由改變后觸發
router.afterEach((to, from, next) => { window.scrollTo(0, 0); });
next(false):next的參數設置為false時，取消導航/跳轉效果。
（8）虛擬DOM
new Vue({ el: '#app', router: router11, render: h => { return h(App) } });
注意：Vue 在創建 Vue 實例時，通過調用 render 方法來渲染實例的 DOM 樹。
h就是createElement,只是換了一個名稱。
Vue 在調用 render 方法時，會傳入一個 createElement 函數作為參數，也就是這里的 h 的實參是 createElement 函數，然后 createElement 會以 APP 為參數進行調用
（9）Vue組件需要一個標簽進行包裹（如div）
<template>
<div>
<h1>首頁</h1>
<!--router-link會渲染為一個a標簽 實現跳轉的方式1-->
<!--router-link 的tag屬性 指定渲染成什么標簽-->
<!--router-link 的replace屬性 不會留下history記錄，不能使用后退鍵-->
<!--router-link 的active-class屬性 路由匹配成功時會自動給當前元素設置為一個名為router-link-active的class-->
<router-link to="/about">跳轉到 about</router-link>
</div>
</template>