摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。

要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問題，就是本篇要探討的主要問題。

這里的路由并不是指我們平時(shí)所說的硬件路由器，這里的路由就是SPA（單頁(yè)應(yīng)用）的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用。vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來(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)決定采用哪一種方式。

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è)，也就是說hash 出現(xiàn)在 URL 中，但不會(huì)被包含在 http 請(qǐng)求中，對(duì)后端完全沒有影響，因此改變 hash 不會(huì)重新加載頁(yè)面；同時(shí)每一次改變#后的部分，都會(huì)在瀏覽器的訪問歷史中增加一個(gè)記錄，使用”后退”按鈕，就可以回到上一個(gè)位置；所以說Hash模式通過錨點(diǎn)值的改變，根據(jù)不同的值，渲染指定DOM位置的不同數(shù)據(jù)。hash 模式的原理是 onhashchange 事件(監(jiān)測(cè)hash值變化)，可以在 window 對(duì)象上監(jiān)聽這個(gè)事件。

由于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，比較好看！
不過這種模式要玩好，還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 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：

1:下載 npm i vue-router -S
2:在main.js中引入 import VueRouter from "vue-router";
3:安裝插件Vue.use(VueRouter);
4:創(chuàng)建路由對(duì)象并配置路由規(guī)則 let router = new VueRouter({routes:[{path:"/home",component:Home}]});
5:將其路由對(duì)象傳遞給Vue的實(shí)例，options中加入 router:router
6:在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)航。

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

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

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

{{ $route.name}}

這種傳參方法的基本語(yǔ)法：

valueString

比如先在src/App.vue文件中

Hi頁(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}}

我們?cè)?src/router/index.js文件里配置路由

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

我們需要傳遞參數(shù)是新聞ID（newsId）和新聞標(biāo)題（newsTitle）.所以我們?cè)诼酚膳渲梦募镏贫诉@兩個(gè)值。

在src/components目錄下建立我們params.vue組件，也可以說是頁(yè)面。我們?cè)陧?yè)面里輸出了url傳遞的的新聞ID和新聞標(biāo)題。

在App.vue文件里加入我們的標(biāo)簽。這時(shí)候我們可以直接利用url傳值了

params

     router-link跳轉(zhuǎn)Query

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

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

于是我們可以獲取參數(shù)：

this.$route.query.queryId

實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。同樣地，URL中各段動(dòng)態(tài)路徑也按某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件，例如：

如何實(shí)現(xiàn)下圖效果(H1頁(yè)面和H2頁(yè)面嵌套在主頁(yè)中)？

1.首先用標(biāo)簽增加了兩個(gè)新的導(dǎo)航鏈接

主頁(yè)
H1頁(yè)面
H2頁(yè)面

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

3.在components目錄下新建兩個(gè)組件模板 H1.vue 和 H2.vue
兩者內(nèi)容類似，以下是H1.vue頁(yè)面內(nèi)容：

修改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}
      ]
    }
  ]

在一個(gè)頁(yè)面里我們有兩個(gè)以上區(qū)域，我們通過配置路由的js文件，來(lái)操作這些區(qū)域的內(nèi)容

1.App.vue文件，在下面新寫了兩行標(biāo)簽,并加入了些CSS樣式

2.需要在路由里配置這三個(gè)區(qū)域，配置主要是在components字段里進(jìn)行

export default new Router({
    routes: [
      {
        path: "/",
        name: "HelloWorld",
        components: {default: HelloWorld,
          left:H1,//顯示H1組件內(nèi)容"I am H1 page,Welcome to H1"
          right:H2//顯示H2組件內(nèi)容"I am H2 page,Welcome to H2"
        }
      },
      {
        path: "/h1",
        name: "H1",
        components: {default: HelloWorld,
          left:H2,//顯示H2組件內(nèi)容
          right:H1//顯示H1組件內(nèi)容
        }
      }
    ]
  })

上邊的代碼我們編寫了兩個(gè)路徑，一個(gè)是默認(rèn)的‘/’，另一個(gè)是‘/Hi’.在兩個(gè)路徑下的components里面，我們對(duì)三個(gè)區(qū)域都定義了顯示內(nèi)容。最后頁(yè)面展示如下圖：

我們先將這兩者console.log打印出來(lái)：

$route 是“路由信息對(duì)象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數(shù)。

① $route.path
字符串，對(duì)應(yīng)當(dāng)前路由的路徑，總是解析為絕對(duì)路徑，如 "/order"。

② $route.params
一個(gè) key/value 對(duì)象，包含了 動(dòng)態(tài)片段 和 全匹配片段，
如果沒有路由參數(shù)，就是一個(gè)空對(duì)象。

③ $route.query
一個(gè) key/value 對(duì)象，表示 URL 查詢參數(shù)。
例如，對(duì)于路徑 /foo?user=1，則有 $route.query.user為1，
如果沒有查詢參數(shù)，則是個(gè)空對(duì)象。

④ $route.hash
當(dāng)前路由的 hash 值 (不帶 #) ，如果沒有 hash 值，則為空字符串。

⑤ $route.fullPath
完成解析后的 URL，包含查詢參數(shù)和 hash 的完整路徑。

⑥ $route.matched
數(shù)組，包含當(dāng)前匹配的路徑中所包含的所有片段所對(duì)應(yīng)的配置參數(shù)對(duì)象。

⑦ $route.name 當(dāng)前路徑名字

$router 是“路由實(shí)例”對(duì)象，即使用 new VueRouter創(chuàng)建的實(shí)例，包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等。

$router常見跳轉(zhuǎn)方法:

Let"s order！
.....

$router.push和$router.replace的區(qū)別：

使用push方法的跳轉(zhuǎn)會(huì)向 history 棧添加一個(gè)新的記錄，當(dāng)我們點(diǎn)擊瀏覽器的返回按鈕時(shí)可以看到之前的頁(yè)面。

使用replace方法不會(huì)向 history 添加新記錄，而是替換掉當(dāng)前的 history 記錄，即當(dāng)replace跳轉(zhuǎn)到的網(wǎng)頁(yè)后，‘后退’按鈕不能查看之前的頁(yè)面。

用戶會(huì)經(jīng)常輸錯(cuò)頁(yè)面，當(dāng)用戶輸錯(cuò)頁(yè)面時(shí)，我們希望給他一個(gè)友好的提示頁(yè)面，這個(gè)頁(yè)面就是我們常說的404頁(yè)面。vue-router也為我們提供了這樣的機(jī)制。

設(shè)置我們的路由配置文件（/src/router/index.js）

{
   path:"*",
   component:Error
}

這里的path:"*"就是輸入地址不匹配時(shí)，自動(dòng)顯示出Error.vue的文件內(nèi)容

在/src/components/文件夾下新建一個(gè)Error.vue的文件。簡(jiǎn)單輸入一些有關(guān)錯(cuò)誤頁(yè)面的內(nèi)容。

此時(shí)我們隨意輸入一個(gè)錯(cuò)誤的地址時(shí)，便會(huì)自動(dòng)跳轉(zhuǎn)到404頁(yè)面

vue-router實(shí)現(xiàn)單頁(yè)面路由原理

Vue.js——vue-router 60分鐘快速入門

技術(shù)胖的Vue-router視頻教程

vue中$router以及$route的使用

Vue2.0 探索之路——vue-router入門教程和總結(jié)

vue-router 2.0一些區(qū)別