Vue2學習之旅二：添加路由vue-router

做者：心葉
時間：2018-04-26 09:26

本篇最終項目文件Github地址：github.com/paper520/vue.quick/tree/V2

Vue2學習之旅系列文章目錄

前一篇咱們已經搭建了一個看起來有點不高大上的架子，爲了後續學習的方便，這裏想先提早把路由說一下，之後一個知識點一個頁面，路由切換，是否是很舒服。

首先，咱們仍是來看看此次咱們的項目目錄結構變成什麼樣子了，以下圖：

準備工做

此次咱們新添加的文件只有PageOne.vue和PageTwo.vue，以及router/index.js。

router/index.js先無視，先讓咱們看看前面二個存在的意義。

PageOne.vue和PageTwo.vue是什麼，前面一篇文章Vue2學習之旅一：初始化項目搭建已經說清楚了，在這裏你能夠就先簡單的認爲就是渲染和控制頁面中一小塊區域（固然也能夠是整個頁面）的東西，本篇路由跳轉就是經過指定一小塊區域，經過修改路由來肯定是PageOne.vue仍是PageTwo.vue來管理這塊區域。讓咱們簡單看看他們二個裏面的內容。

PageOne.vue裏面的內容：

<template>
    <span>
        這是頁面一
    </span>
</template>

PageTwo.vue裏面的內容：

<template>
    <span>
        這是頁面二
    </span>
</template>

這樣，咱們就準備好了二個頁面。

瞭解路由的人應該都知道，路由就比如一種狀態的切換，好比你點擊了一個按鈕，若是你沒有註冊按鈕的點擊事件，你的點擊不會觸發你想要的事情的發生。

所以，路由跳轉以後，若是咱們想要頁面中指定的一塊區域切換用PageOne.vue和PageTwo.vue來管理，就須要配置好路由狀態改變的對應事件，這就是咱們接下來的事情。

安裝Vue路由

Vue路由是一個獨立的模塊，所以，和咱們用到vue時同樣，咱們須要安裝他，你應該在package.json中添加下面內容（其實就是在以前安裝的vue下面添加那一行vue-router就行了）：

"dependencies": {
    "vue": "^2.2.6",
    "vue-router": "^3.0.1"
}

而後，別忘了在命令行執行：

npm install

此時，你就安裝好了咱們的vue-router

配置Vue路由

路由安裝好了以後，具體路由跳轉到某個狀態的時候，頁面中的那一小塊此刻應該由PageOne.vue和PageTwo.vue之中的誰來管理，這須要提早配置好，否則路由可不知道你想幹什麼，所以，咱們須要編輯開始被無視的router/index.js文件，路由就是在這裏配置的。

先讓咱們來看看最終裏面的內容：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//路由跳轉的組件，要提早注入
import PageOne from '../components/PageOne.vue';//【地方一】
import PageTwo from '../components/PageTwo.vue';

//路由配置
const router = new VueRouter({
    routes: [{
        path: '/',//【地方二】
        redirect: 'PageOneLink'
    },
    {
        path: '/PageOneLink',//【地方三】
        component: PageOne
    },
    {
        path: '/PageTwoLink',//【地方四】
        component: PageTwo
    }
    ]
});

export default router;

具體的細節你能夠之後學會了慢慢體會，此時，我先告訴你幾個你應該知道是重點：

1.開始咱們引入了vue-router，由於配置路由只有他本身知道怎麼配置，所以引入是必須的；

2.在【地方一】處，咱們引入了以前一直耿耿於懷的二個組件，因爲後續要指定跳轉誰，此處先引入；

3.前面的都是準備工做，後面的就是真的配置了，先看【地方三】，咱們配置了若是路由狀態是PageOneLink的話那塊區域由PageOne.vue管理，【地方四】就不言而喻了；

4.最後還有【地方二】，因爲剛剛打開一個頁面的時候，路由應該是什麼狀態都不是，這裏就是配置此時自動跳轉到狀態PageOneLink。

OK?到這裏結束都不難理解吧！想想，是否是隻差最後一步了：使用這個配置好的路由，來讓他幫助咱們控制頁面中每一塊。

使用路由

首先，誰使用路由？固然須要他的Vue對象了，咱們這裏就是根對象（也就是entry.js裏面新建的那個），所以，先看看修改後的entry.js:

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

// 1.引入剛剛配置的路由（router/index.js）
import router from './router';

//根對象
var vm = new Vue({
    //掛載點
    el: '#root',
    //2.使用剛剛的路由配置
    router: router,
    //啓動組件
    render: function (callback) {
        return callback(App);
    }
});

仔細對比以前的文件，是否是就多了二行代碼（我方便備註1.和2.的地方），應該不用多說了吧！

此時，已經使用了，但是，別忘了，還有一件事情，路由跳轉以後，應該控制頁面裏面的哪一塊區域？這也須要指定好。

因爲咱們的是給根Vue對象使用，能夠在他使用的組件App.vue裏面配置，仍是先開卡App.vue此刻被改爲什麼了再說說具體內容：

<template>
    <section>
      <header>
        {{msg}}
      </header>
      <ul>
      <!--路由導航【地方一】-->
        <li>
          <router-link to="/PageOneLink">頁面一</router-link>
        </li>
        <li>
          <router-link to="/PageTwoLink">頁面二</router-link>
        </li>
    </ul>
    <!--路由跳轉視圖【地方二】-->
    <router-view></router-view>
    </section>
</template>

<script>
export default {
  data() {
    return {
      msg: "vue.quick - 基本版本代碼"
    };
  }
};
</script>

能夠對比一下，主要就是修改了template裏面的內容，添加的地方有二處：

1.先看【地方二】，這個是必須的，也就是知道控制頁面裏的哪一塊區域，沒錯，就是這裏佔位的地方；

2.接着是【地方一】，地方一簡單的理解就是頁面的二個按鈕，你點擊其中每個，就會跳轉到對應的狀態，和前面的路由配置對應。

如今，啓動項目，頁面訪問的時候應該就能夠看見下面的效果：

這樣，路由就簡單的完成了。

頁面美化（能夠無視此段）

爲了之後添加新的練習頁面的時候，比較好看，建議你能夠在App.vue裏面的style標籤中添加下面的樣式：

html {
  font-size: 100px;
}
body {
  margin: 0;
}
header {
  font-size: 0;
}
ul {
  background-color: black;
  font-size: 0;
  line-height: 0.4rem;
  padding: 0 0.3rem 0 0.3rem;
}
ul > li:not(:last-child) {
  margin-right: 0.1rem;
}
ul > li {
  font-size: 0.16rem;
  display: inline-block;
}
ul > li > a:hover {
  color: rgb(240, 227, 227);
}
ul > li > a.router-link-active {
  color: #fff;
  outline: none;
}
ul > li > a {
  color: #60818e;
  text-decoration: none;
}

此時頁面的截圖：

總結

路由的基本用法就這些了，後續對於高級用法若是有添加會新寫一篇文章，本系列就是按部就班的系列，但願路由你理解了，祝你好運！