摘要：路由模塊的本質就是建立起和頁面之間的映射關系。模式的原理是事件監測值變化，可以在對象上監聽這個事件。這兩個方法應用于瀏覽器記錄棧，在當前已有的基礎之上，它們提供了對歷史記錄修改的功能。

這里的路由并不是指我們平時所說的硬件路由器，這里的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質 就是建立起url和頁面之間的映射關系。

至于我們為啥不能用a標簽，這是因為用Vue做的都是單頁應用（當你的項目準備打包時，運行 npm run build時，就會生成dist文件夾，這里面只有靜態資源和一個index.html頁面），所以你寫的標簽是不起作用的，你必須使用vue-router來進行管理。

SPA(single page application):單一頁面應用程序，只有一個完整的頁面；它在加載頁面時，不會加載整個頁面，而是只更新某個指定的容器中內容。單頁面應用(SPA)的核心之一是: 更新視圖而不重新請求頁面;vue-router在實現單頁面前端路由時，提供了兩種方式：Hash模式和History模式；根據mode參數來決定采用哪一種方式。

Hash模式：

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。hash（#）是URL 的錨點，代表的是網頁中的一個位置，單單改變#后的部分，瀏覽器只會滾動到相應位置，不會重新加載網頁，也就是說hash 出現在 URL 中，但不會被包含在 http 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面；同時每一次改變#后的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”后退”按鈕，就可以回到上一個位置；所以說Hash模式通過錨點值的改變，根據不同的值，渲染指定DOM位置的不同數據。hash 模式的原理是 onhashchange 事件(監測hash值變化)，可以在 window 對象上監聽這個事件。

History模式：

由于hash模式會在url中自帶#，如果不想要很丑的 hash，我們可以用路由的 history 模式，只需要在配置路由規則時，加入"mode: "history"",這種模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。這兩個方法應用于瀏覽器記錄棧，在當前已有的 back、forward、go 基礎之上，它們提供了對歷史記錄修改的功能。只是當它們執行修改時，雖然改變了當前的 URL ，但瀏覽器不會立即向后端發送請求。

//main.js文件中
const router = new VueRouter({
  mode: "history",
  routes: [...]
})

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，比較好看！ 不過這種模式要玩好，還需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}
]

此處就設置如果URL輸入錯誤或者是URL 匹配不到任何靜態資源，就自動跳到到Home頁面

1.直接修改地址欄
2.this.$router.push(‘路由地址’)
3.

下載 npm i vue-router-S

在main.js中引入 importVueRouterfrom"vue-router";

安裝插件 Vue.use(VueRouter);

創建路由對象并配置路由規則

let router = new VueRouter({routes:[{path:"/home",component:Home}]});

將其路由對象傳遞給Vue的實例，options中加入 router:router

在app.vue中留坑

具體實現請看如下代碼：

//main.js文件中引入
import Vue from "vue";
import VueRouter from "vue-router";
//主體
import App from "./components/app.vue";
import Home from "./components/home.vue"
//安裝插件
Vue.use(VueRouter); //掛載屬性
//創建路由對象并配置路由規則
let router = new VueRouter({
  routes: [
    //一個個對象
    { path: "/home", component: Home }
  ]
});
//new Vue 啟動
new Vue({
  el: "#app",
  //讓vue知道我們的路由規則
  router: router, //可以簡寫router
  render: c => c(App),
})

在app.vue中“留坑”

//app.vue中

明式的導航 和編程式的導航 router.push(...)都可以傳參，本文主要介紹前者的傳參方法，同樣的規則也適用于編程式的導航。

用name傳遞參數

在路由文件src/router/index.js里配置name屬性

routes: [
  {
    path: "/",
    name: "Hello",
    component: Hello
  }
]

模板里(src/App.vue)用 $route.name來接收 
比如： 
{{ $route.name}}

通過 標簽中的to傳參

基本語法：

valueString

在src/App.vue文件中

頁面1

然后把src/router/index.js文件里給hi1配置的路由起個name,就叫hi1

{path:"/hi1",name:"hi1",component:Hi1}

最后在模板里(src/components/Hi1.vue)用 $route.params.username進行接收

{{$route.params.username}}-{{$route.params.id}}

利用url傳遞參數----在配置文件里以冒號的形式設置參數

/src/router/index.js文件里配置路由

{
  path:"/params/:newsId/:newsTitle",
  component:Params
}

使用path來匹配路由，然后通過query來傳遞參數

  router-link跳轉

對應路由配置：

{
  path: "/query",
  name: "Query",
  component: Query
}

獲取參數：

this.$route.query.queryId

導航鏈接:

主頁
頁面一
頁面二

在HelloWorld.vue加入 標簽，給子模板提供插入位置

在components目錄下新建兩個組件模板 H1.vue 和 H2.vue

再修改router/index.js代碼，子路由的寫法是在原有的路由配置下加入children字段

routes: [
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld,
    children: [{path: "/h1", name: "H1", component: H1},//子路由的必須在HelloWorld.vue中出現
      {path: "/h2", name: "H2", component: H2}
    ]
  }
]