Vue學習日記（三）——Vue路由管理vue-router

前言

爲了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定仍是來一個實戰教程來帶你們更加的去深刻理解vue-router，在這以前，讀者先自行了解和去官網下載npm和node，附：npm官網

項目構建

這裏我採用vue-cli+webpack構建初始項目，在vue官網裏面也有相關介紹，在這裏我就手把手教你們一下吧，先經過控制檯進入相關的文件目錄下，而後輸入

# 後面是註釋
# $表示當前文件目錄

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
# 運行項目my-preoject
$ npm run dev

• npm install --global vue-cli 下載構建工具

• vue init webpack my-project 初始化項目

  

• npm install 下載相關資源到node_models

• npm run dev 運行項目後，在瀏覽器輸入http://localhost:8080/#/可看到

介紹vue-router

通過上面簡單的構建以後，一個項目的初始化就完成了，這裏vue-cli和webpack已經幫咱們弄好了文件目錄結構和基本目錄

在進行使用vue-router以前，我不得不也先介紹一下vue-router是什麼？

它是一個vue.js下的路由組件，那什麼是路由呢？網上有一大堆官方的介紹，相信對於小白是難以理解的，這裏我就簡單的說明一下吧。

其實路由也就是url，url是什麼呢？url就是惟一資源定位符，簡單的說，也就是標記頁面的惟一存在的一個標籤，就像https://www.baidu.com，這裏的www.baidu.com就是惟一資源定位符，https就只是一種協議，規範計算機網絡的通訊協議。

介紹完這些，那麼對於咱們究竟該怎麼用呢？

其實很簡單，在平時當中，咱們就常常碰到在一個網站裏面點擊連接會彈到另一個頁面，而後就能夠發現他們的url改變了，而vue-router就是這樣，在同個域名下（這裏的域名是http://localhost:8080），改變域名後面的字符參數，好比http://localhost:8080/me和http://localhost:8080/you是兩個不一樣的頁面就是靠vue-router進行實現的。

引用vue-router

若是你在以前沒有安裝vue-router的話，建議能夠先去官網，看着文檔使用npm安裝一下，這裏就很少作介紹了。

首先我先在項目my-project/src/components（存放組件的目錄）裏面添加兩個文件me.vue和you.vue

// me.vue
<template>
  <div>
    我是me
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style scoped>
</style>

// you.vue
<template>
  <div>
    我是you
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style scoped>
</style>

而後修改my-project/src/router（存放路由相關信息的目錄）下面修改index.js成

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 導入組件
import me from '../components/me'
import you from '../components/you'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 將組件命名到路由上，輸入http://localhost:8080/#/me
    // 便可進入不一樣的頁面
    {
      path: '/me',
      component: me
    },
    // 將組件命名到路由上，輸入http://localhost:8080/#/you
    // 便可進入不一樣的頁面
    {
      path: '/you',
      component: you
    }
  ]
})

這樣只會輸入http://localhost:8080/#/me就會進到其餘頁面，是否是很簡單，
那麼咱們怎麼在頁面裏面進行跳轉呢？

這就運用到了更有趣的知識了就是router-link你只要在你的組件的代碼下輸入

<router-link :to="/me">這裏是跳轉連接</router-link>

網頁就自動跳轉到http://localhost:8080/#/me頁面了，可是這樣老是很差的，由於，若是因爲一些緣由，咱們想修改路由的名字（好比me改爲him）就得改兩個文件的信息，所以，vue團隊也早就想好了，就是name屬性，將my-project/src/router（存放路由相關信息的目錄）下面修改index.js成

// ...
    {
      path: '/me',
      name: 'me',
      component: me
    },
    // ...

而後跳轉就改爲

<router-link :to="{ name: 'me'}">這裏是跳轉連接</router-link>

就能夠進行跳轉了

高級應用

1. 前端路由 最初級的應用，就和上面的引用同樣，固然還能夠經過js代碼來改變，這個也很簡單，就是好比添加一個按鈕，點擊按鈕經過js跳轉到其餘頁面，就是重定向，簡單的js代碼也下面這樣，就能夠跳轉到其餘頁面了

vue.$router.push('/me')

1. 動態路由 經過router-link傳遞參數，例如<router-link :to="{ name: 'user', params: { userId }}">User</router-link>，傳入userId這個參數，進行渲染不一樣的路由信息
2. 嵌套路由 嵌套路由其實簡單的理解就是，子路由，例如，我想在me下面在添加幾個路由him和she那上面的代碼能夠這樣寫以後輸入http://localhost:8080/#/me/him就能夠進入到子路由的頁面

// ...
    {
      path: '/me',
      name: 'me',
      component: me，
      children: [
        {
            path: 'him'
            // ...
        },
        {
            path: 'she'
            // ...
        }
      ]
    },
    // ...

1. 懶加載 結合異步組件以及在組件的created鉤子上觸發獲取數據的ajax請求，能夠最大化的下降加載時間，減小流量消耗。這個對於沒有項目的人可能接觸比較少，建議先知道這個概念。
2. 重定向 能夠實現某些須要根據特定邏輯改變頁面本來路由的需求，例如簡單的未登陸狀態下的頁面訪問「我的信息」路由時應該重定向到登陸路由頁面。
3. History的控制 History是Html5的新語法，我的以爲就是對於跳轉的時候，特別是微信小程序，就是控制點擊回退按鈕的時候不至於退出頁面而跳轉到本身想要的頁面

總結

其實還有不少高級應用場景，我就不一一列舉出來了，由於這些其實最好仍是上官方文檔進行說明，我這裏只是解釋一下簡單的用法，以及初學者可能對官方文檔會有誤解來進行說明一下，但願你們仍是學會看API，附官網地址