vue-router （持續更新中）

vue-router是單獨的第三方插件，須要單獨安裝。 vue的設計就是這樣。 vue-router 和 vuex 是做爲第三方插件，存在的。

1.vue-router入門

安裝vue-router vue-router是一個插件包，因此咱們仍是須要用npm來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令。

npm install vue-router --save-dev
複製代碼

若是你安裝很慢，也能夠用 cnpm 進行安裝，若是你在使用 vue-cli 中已經選擇安裝了 vue-router ，那這裏不須要重複安裝了。

(1) 解讀 src/router/index.js 文件 咱們用 vue-cli 生產了咱們的項目結構，你能夠在 src/router/index.js 文件，這個文件就是路由的核心文件，咱們先解讀一下它。

import Vue from 'vue'                    // 引入Vue
import Router from 'vue-router'          // 引入vue-router
import Hello from '@/components/Hello'   // 引入根目錄下的Hello.vue組件

Vue.use(Router)          // Vue全局使用Router

export default new Router({
    routes: [                   // 配置路由，這裏是一個數組
        {                       // 每個連接都是一個對象
            path: '/',          // 連接路徑
            name: 'Hello',      // 路由名稱
            components: Hello   // 對應的組件模板
        }
    ]
})
複製代碼

增長一個Hi的路由和頁面：

import Hi from '@/components/Hi'
export default new Router({
    routes: [
        {
            path:'/',
            name: 'Hello',
            component: Hello
        }, {
            path: '/hi',
            name: 'Hi',
            component: Hi
        }
    ]
})
複製代碼

2.在組件中使用

vue-router一共有兩個：

<router-link>  
<router-view>  
複製代碼

咱們須要在頁面上設置導航連接，咱們只要點擊就能夠實現頁面內容的變化。製做連接須要 <router-link>標籤，咱們先來看一下它的語法。

<router-link to="/">首頁</router-link>
複製代碼

明白了 <router-link>的基本語法，咱們在 src/App.vue 文件中的template里加入下面代碼，實現導航。

<p>導航：
    <router-link to="/">首頁</router-link>
    <router-link to="/hi">Hi頁面</router-link>
</p>
複製代碼

3.vue-router配置子路由

咱們這節課學習一會兒路由的路由方式，也叫子路由。
子路由的狀況通常用在一個頁面有他的基礎模板，然而它下面的頁面都隸屬於這個模板，只是改變部分樣式。

(1) 改造App.vue的導航代碼

App.vue代碼：

<p>導航：
    <router-link to="/">首頁</router-link> |
    <router-link to="/hi">Hi頁面</router-link> |
    <router-link to="/hi/hi1">-Hi頁面 1</router-link> |
    <router-link to="/hi/hi2">-Hi頁面 2</router-link>
</p>
複製代碼

(2) 改寫 components/Hi.vue 頁面 把 Hi.vue 改爲一個通用的模板，加入 <router-view>標籤，給子模板提供插入位置。
"Hi 頁面 1" 和 "Hi 頁面 2" 都至關於 "Hi 頁面"的子頁面，有點像繼承關係。 咱們在"Hi頁面"里加入 <router-view> 標籤。 components/hi.vue 代碼：

<template>
    <div class="hello">
        <router-view class="aaa"></router-view>
    </div>
</template>
複製代碼

(3) 修改 src/router/index.js 代碼：

import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }, {
            path: '/hi',
            component: Hi,
            children: [
                {path: '/', component: Hi},
                {path: 'hi1', component: Hi1},
                {path: 'hi2', component: Hi2}
            ]
        }
    ]
})
複製代碼

4.vue-router如何參數傳遞

開發中，參數的傳遞是個最基本的業務需求。 點擊導航菜單時，跳轉頁面上能顯示出當前頁面的路徑，來告訴用戶你想在所看的頁面位置（相似於麪包屑導航）。 (1) 用name傳遞參數 兩步完成用name傳值並顯示在模板裏： 在路由文件 src/router/index.js 裏配置 name 屬性。

routes: [
    {
        path: '/',
        name: 'Hello',
        component: Hello
    }
]
複製代碼

模板裏 （src/App.vue) 用 $route.name 的形式接收，好比直接在組件中顯示：

<p>{{ $route.name }} </p>
複製代碼

(2) 經過 <router-link>標籤中的 to 傳參 其實咱們多數傳參是不用name進行傳參的，咱們用<router-link>標籤中的to屬性進行傳參，須要你注意的是這裏的to要進行一個綁定，寫成:to。先來看一下這種傳參方法的基本語法。

<router-link :to="{name:xxx, params: {key:value}}">valueString</router-link>
複製代碼

這裏的to前邊是帶冒號的，而後後邊跟的是一個對象形式的字符串。 咱們改造一下咱們的src/App.vue裏的<router-link>標籤，咱們把hi1頁面的<router-link>進行修改。

<router-link :to="{name:'hi1', params:{username:'jspang'}}">Hi頁面1</router-link>
複製代碼

把src/router/index.js文件裏給hi1配置的路由起個name，就叫hi1

{path:'/hi1',name:'hi1', component:Hi1},
複製代碼

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

{{$route.params.username}}
複製代碼

5.單頁面多路由區域操做

例如咱們在src/App.vue里加上兩個<router-view>標籤。咱們用vue-cli創建新的項目，而且打開了src目錄下的App.vue文件，在<router-view>下面新寫了兩行<router-view>標籤，並加入了些CSS樣式。

<router-view ></router-view>
<router-view name="left" style="float:left;width:50%; height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%; height:300px;"></router-view
複製代碼

如今的頁面中有了三個<router-view>標籤，也就是說咱們須要在路由裏配置這三個區域，配置主要是在components字段裏進行。

import Vue from  ‘vue’
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }
 
  ]
})
複製代碼

最後在App.vue中配置咱們的<router-link>就能夠了。

<router-link to=」/」>首頁</router-link> |
<router-link to=」/hi」>Hi首頁</router-link> |
複製代碼

6.vue-router利用url傳遞參數

總結：在組件中常見用法

this.$route.path      //   

this.$router.push()        // 
複製代碼

vue-router 源碼解析