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

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

至于我們?yōu)樯恫荒苡胊標(biāo)簽，這是因?yàn)橛肰ue做的都是單頁應(yīng)用（當(dāng)你的項(xiàng)目準(zhǔn)備打包時，運(yùn)行 npm run build時，就會生成dist文件夾，這里面只有靜態(tài)資源和一個index.html頁面），所以你寫的標(biāo)簽是不起作用的，你必須使用vue-router來進(jìn)行管理。

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

Hash模式：

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

History模式：

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

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

當(dāng)你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，比較好看！ 不過這種模式要玩好，還需要后臺配置支持。因?yàn)槲覀兊膽?yīng)用是個單頁客戶端應(yīng)用，如果后臺沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 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: "/"}
]

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

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

下載 npm i vue-router-S

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

安裝插件 Vue.use(VueRouter);

創(chuàng)建路由對象并配置路由規(guī)則

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

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

在app.vue中留坑

具體實(shí)現(xiàn)請看如下代碼：

//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); //掛載屬性
//創(chuàng)建路由對象并配置路由規(guī)則
let router = new VueRouter({
  routes: [
    //一個個對象
    { path: "/home", component: Home }
  ]
});
//new Vue 啟動
new Vue({
  el: "#app",
  //讓vue知道我們的路由規(guī)則
  router: router, //可以簡寫router
  render: c => c(App),
})

在app.vue中“留坑”

//app.vue中

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

用name傳遞參數(shù)

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

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

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

通過 標(biāo)簽中的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進(jìn)行接收

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

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

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

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

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

  router-link跳轉(zhuǎn)

對應(yīng)路由配置：

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

獲取參數(shù)：

this.$route.query.queryId

導(dǎo)航鏈接:

主頁
頁面一
頁面二

在HelloWorld.vue加入 標(biāo)簽，給子模板提供插入位置

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

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

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