詳解vue-router基本使用

路由，其實就是指向的意思，當我點擊頁面上的home 按鈕時，頁面中就要顯示home的內容，若是點擊頁面上的about 按鈕，頁面中就要顯示about 的內容。Home按鈕 => home 內容， about按鈕 => about 內容，也能夠說是一種映射。因此在頁面顯示中，有兩個部分，一個是須要點擊的部分，一個是點擊以後，顯示點擊內容的部分。javascript

點擊以後，怎麼作到正確的對應，好比，我點擊home 按鈕，頁面中怎麼才能顯示home的內容。這就要在js 文件中配置路由。html

路由中有三個基本的概念 route, routes, router。vue

1， route，它是一條路由，由這個英文單詞也能夠看出來，它是單數， Home按鈕 => home內容，這是一條route, about按鈕 => about 內容，這是另外一條路由。html5

2， routes 是一組路由，把上面的每一條路由組合起來，造成一個數組。[{home 按鈕 =>home內容 }， { about按鈕 => about 內容}]java

3， router 是一個機制，至關於一個管理者，它來管理路由。由於routes 只是定義了一組路由，它放在哪裏是靜止的，當真正來了請求，怎麼辦？就是當用戶點擊home 按鈕的時候，怎麼辦？這時router 就起做用了，它到routes 中去查找，去找到對應的 home 內容，因此頁面中就顯示了　　home 內容。vue-router

4，客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候，about 中的內容所有隱藏，反之也是同樣。客戶端路由有兩種實現方式：基於hash 和基於html5 history api.vue-cli

vue-router中的路由也是基於上面的內容來實現的api

在vue中實現路由仍是相對簡單的。由於咱們頁面中全部內容都是組件化的，咱們只要把路徑和組件對應起來就能夠了，而後在頁面中把組件渲染出來。數組

1，頁面實現（html模版中）瀏覽器

在vue-router中, 咱們也能夠看到它定義了兩個標籤<router-link> 和<router-view>。 <router-link> 就是定義頁面中點擊的部分，<router-view> 就是點擊後，顯示內容的部分。因此 <router-link> 還有一個很是重要的屬性 to，它定義點擊以後，要到哪一個路徑下，如：<router-link to="/home">Home</router-link>

2， js 中配置路由

首先要定義route, 一條路由的實現。它是一個對象，最基本的一條路由由兩個部分組成： path: component. path 指路徑，component 指的是組件。如：{path:'/home', component: home}

咱們這裏有兩條路由，組成一個routes:

const routes = [
 { path: '/home', component: Home },
 { path: '/about', component: About }
]

最後建立router 對路由進行管理，它是由構造函數 new vueRouter() 建立，接受routes 參數。

const router = new VueRouter({
   routes // short for routes: routes
})

配置完成後，把router 實例注入到 vue 根實例中,就可使用路由

const app = new Vue({
 router
}).$mount('#app')

執行過程：當用戶點擊 router-link 標籤時，會去尋找它的 to 屬性，它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home} path 一一對應，從而找到了匹配的組件，最後把組件渲染到 <router-view> 標籤。全部的這些實現纔是基於hash 實現的。

vue-cli 建立一個項目體驗一下, 固然不要忘記安裝vue-router

1, 在src 目錄下新建兩個組件，home.vue 和 about.vue

<template>
  <div>
    <h1>home</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg: "我是home 組件"
      }
    }
  }
</script>

<template>
  <div>
    <h1>about</h1>
    <p>{{aboutMsg}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        aboutMsg: '我是about組件'
      }
    }
  }
</script>

2, 在 App.vue中定義<router-link > 和 </router-view>

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <header>
  <!-- router-link 定義點擊後導航到哪一個路徑下 -->
   <router-link to="/home">Home</router-link>
   <router-link to="/about">About</router-link>
  </header>
  <!-- 對應的組件內容渲染到router-view中 -->
  <router-view></router-view>  
 </div>
</template>

<script>
export default {
 
}
</script>

3, 在 src目錄下再新建一個router.js 定義router, 就是定義路徑到組件的映射。

import Vue from "vue";
import VueRouter from "vue-router";

// 引入組件
import home from "./home.vue";
import about from "./about.vue";

// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
  {
    path:"/home",
    component: home
  },
  {
    path: "/about",
    component: about
  }
]

var router = new VueRouter({
  routes
})
export default router;

4，把路由注入到根實例中，啓動路由。這裏其實還有一種方法，就像store 注入到根實例中，咱們能夠在main.js中引入路由，注入到根實例中。

import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from "./router.js"
new Vue({
 el: '#app',
 router, // 注入到根實例中
 render: h => h(App)
})

5，這時點擊頁面上的home 和about 能夠看到組件來回切換。可是有一個問題，當首次進入頁面的時候，頁面中並無顯示任何組件。咱們想讓頁面一加載進來就顯示home頁面，這須要重定向，所謂重定向，其實就是從新給它指定一個方向，好比當用戶點擊home 的時候，咱們讓它指向about.

這用到了redirect 配置。剛進入頁面的時候，它的路徑是 '/', 因此從新定義到home

const routes = [
  {
    path:"/home",
    component: home
  },
  {
    path: "/about",
    component: about
  },
  // 重定向
  {
    path: '/', 
    redirect: '/home' 
  }
]

6，當咱們打開瀏覽器的控制檯，能夠看到路由時組件的切換。

首先看到 router-link 標籤渲染成了 a 標籤，to 屬性變成了a 標籤的 href 屬性，這時就明白了點擊跳轉的意思。router-view 標籤渲染成了咱們定義的組件。能夠對比一下app.vue 中的標籤和控制檯中的標籤

動態路由

官網給的例子是，不一樣的用戶（就是用戶的id不一樣），它都會導航到同一個user 組件中。這樣咱們在配置路由的時候，就不能寫死, 就是路由中的path屬性，不能寫死。如 path：「/home」,只有是home的時候，才能顯示home 組件，執行的是嚴格匹配。導航到 user 組件，路徑中確定有user,

id 不一樣，那就給路徑一個動態部分來匹配不一樣的id. 動態部分以 : 開頭，那麼路徑就變成了 /user/:id, 這條路由就能夠這麼寫： { path:"/user/:id", component: user }.

再定義一個user組件，頁面中添加兩個router-link 用於導航， router.js中添加路由配置。user組件隨便寫一個就行了。

app.vue 更改以下：

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <header>
   <router-link to="/home">Home</router-link>
   <router-link to="/about">About</router-link>
   <!-- 增長兩個到user組件的導航，能夠看到這裏使用了不一樣的to屬性 -->
   <router-link to="/user/123">User123</router-link>
   <router-link to="/user/456">User456</router-link>
  </header>
  <router-view></router-view>  
 </div>
</template>

router.js 更改以下：

const routes = [
  {
    path:"/home",
    component: home
  },
  {
    path: "/about",
    component: about
  },
  /*新增user路徑，配置了動態的id*/
  {
    path: "/user/:id",
    component: user
  },
  {
    path: '/', 
    redirect: '/home' 
  }
]

在動態路由中，若是咱們想知道路由是從哪裏過來的，就是獲取到動態部分怎麼辦？其實，當整個vue-router 注入到根實例後，在組件的內部，咱們是能夠經過this.$route.params 來得到這個動態部分的。它是一個對象，屬性名，就是路徑中定義的動態部分 id, 屬性值就是router-link中to 屬性中的動態部分，如123。在組件中，若是想要獲取到state 中的狀態，咱們能夠用computed 屬性，在這裏也是同樣，在組件中，定義一個computed 屬性dynamicSegment， user 組件修改以下：

<template>
  <div>
    <h1>User</h1>
    <div>我是user組件, 動態部分是{{dynamicSegment}}</div>
  </div>
</template>
<script>
  export default {
    computed: {
      dynamicSegment () {
        return this.$route.params.id
      }
    }
  }
</script>