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

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

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

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

Hash模式：

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

History模式：

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

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

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

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

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

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

下載 npm i vue-router-S

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

安裝插件 Vue.use(VueRouter);

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

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

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

在app.vue中留坑

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

//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)建路由對(duì)象并配置路由規(guī)則
let router = new VueRouter({
  routes: [
    //一個(gè)個(gè)對(duì)象
    { path: "/home", component: Home }
  ]
});
//new Vue 啟動(dòng)
new Vue({
  el: "#app",
  //讓vue知道我們的路由規(guī)則
  router: router, //可以簡(jiǎn)寫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來(lái)接收 
比如： 
{{ $route.name}}

通過(guò) 標(biāo)簽中的to傳參

基本語(yǔ)法：

valueString

在src/App.vue文件中

頁(yè)面1

然后把src/router/index.js文件里給hi1配置的路由起個(gè)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ù)----在配置文件里以冒號(hào)的形式設(shè)置參數(shù)

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

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

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

  router-link跳轉(zhuǎn)

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

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

獲取參數(shù)：

this.$route.query.queryId

導(dǎo)航鏈接:

主頁(yè)
頁(yè)面一
頁(yè)面二

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

在components目錄下新建兩個(gè)組件模板 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}
    ]
  }
]