這篇教程我們將從Vue裡最基礎的路由/導航開始講起，然後再看看通過Vue構建的Ionic應用如何導航。

在Vue裡引入Ionic的元件（或者任何其他東西）是非常簡單的，就像你在Angular中做的一樣，只需要把他們注入模板裡，不過當我們想在兩個頁面之間導航時稍微變複雜了一點。在Angular裡，我們只是用ionic-angular庫提供的NavController服務，但是在Vue裡我們將依賴於Vue自己的路由。

備註：Ionic4（允許我們脫離Angular使用Ionic）還處於早期版本——記住我們做的這些都是帶有實驗性質的。

Vue導航

就像我在上一篇文章裡說的，Vue比Angular更加輕量化，組織性沒有那麼嚴密。Angular提供了所有開箱即用的東西，但是在Vue裡你需要自己填補空白。

導航就是你需要填補的空白的一部分，儘管你可以在Vue裡使用任何路由，Vue還是提供了一個預設的路由，你可以在專案建立的時候設定它。

如果你選擇使用Vue router，它會自動設定好專案的路由機制。如果開啟src/App.vue你會發現router-view標籤：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template

這和Ionic的ion-nav元件很相似，作為不同頁面之間導航的container，需要顯示的檢視就會顯示在router-view

在你的專案裡有一個router資料夾，看看router/index.js檔案：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: HelloWorld
    }
  ]
})

這裡定義了這個應用所有的路由。如果你過去一直使用Ionic（不怎麼熟悉Angular）那你可能對這種抽象路由的定義不是很熟，不過這種概念其實很簡單。我們需要提供一個path

如果你想導航到一個頁面，只需要在router-link標籤裡這樣使用：

<router-link to="/detail">Go to the Detail Page</router-link>

或者如果你想使用一個方法來導航到另一個頁面：

methods: {
  goToDetail () {
    this.$router.push('detail')
  }
}

然後在你的模板這樣使用這個方法：

<button @click="goToDetail">Go to the Detail Page</button>

現在我們看一眼src/main.js檔案，你會發現router也被設定好了：

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

這是當我們使用CLI時自動設定好的，你沒什麼需要擔心的。不過當初始化一個Vue應用時，確保這裡已經引入了它是很重要的。

Ionic/Vue應用導航

既然我們已經過了一遍基礎，現在來看看如何在使用Vue構建的Ionic應用裡面導航。為了使Ionic的web components可以在我們的Vue應用使用，我們需要在index.html引入下面這行程式碼：

<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>

記住這裡麵包含的是一個Ionic4的早期版本，僅此一步基本可以讓我們執行Ionic，不過還有幾步：

如果你試著在手機裝置上看這個應用，它的尺寸不太對。為了使應用在手機上正確的顯示，我們需要使用meta標籤。我們可以在一個普通的Ionic/Angular應用裡複製過來：

新增下面的meta標籤到index.html：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

因為我們在使用web components，我們其實是在試圖新增一些普通html不存在的標籤到我們的Vue應用，而且也沒有被定義為Vue元件。如果我們試著在Vue裡使用Ionic元件，執行之後會看到這個錯誤：

[Vue warn]: Unknown custom element: <ion-app>

既然Vue不認識這些自定義元素，我們需要在src/main.js裡進行如下設定：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.config.ignoredElements = [
    'ion-app',
    'ion-header',
    'ion-navbar',
    'ion-title',
    'ion-content',
    'ion-button'
];

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

你需要把你想使用的Ionic元件新增到ignoredElements 陣列——你不需要引入你沒有使用的Ionic元件。

現在我們可以在Vue元件裡使用Ionic元件了，讓我們把已經存在的HelloWorld元件Ionic化吧。

修改src/components/HelloWorld.vue如下：

<template>
  <ion-app>
    <ion-header>

        <ion-navbar>
            <ion-title>Ionic</ion-title>
        </ion-navbar>

    </ion-header>

    <ion-content>

      <ion-button @click="goToDetail">Hello</ion-button>

    </ion-content>
  </ion-app>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    goToDetail () {
      this.$router.push('detail')
    }
  }
}
</script>

<style scoped></style>

現在我們只是使用Ionic元件建立普通的模板。我們使用 @click來觸發goToDetail方法。這會進入detail頁面，不過我們還沒建立這個頁面。你可以看到，這並不是一點也不像Ionic/Angular。我們只是使用@click代替(click)，使用 $router代替NavController的push方法。雖然看起來有一點不同，但是基本的概念都是相同的。

在Vue裡建立一個新的Ionic頁面

我們試著push到detail頁面，不過我們還沒建立這個頁面，而且還沒為它設定路由。我們現在來做這個：

建立src/components/Detail.vue檔案：

<template>
  <ion-app>
    <ion-header>

        <ion-navbar>
            <ion-title>Ionic</ion-title>
        </ion-navbar>

    </ion-header>

    <ion-content padding>

        <p><router-link to="/">Go home</router-link></p>

    </ion-content>
  </ion-app>
</template>

<script>
export default {
  name: 'Detail',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped></style>

這個元件和HelloWorld元件非常相似，只是更簡單了。這次我們使用router-link標籤來導航返回home頁面。在Ionic應用裡一般不會像這樣使用一個文字連結進行導航，不過我只是展示一下這種方式的用法：

元件定義好了，我們來為它建立路由：

如下修改router/index.js的內容：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: HelloWorld
    },
    {
      path: '/detail',
      component: Detail
    }
  ]
})

我們引入剛剛建立的Detail元件然後設定它的路由。現在我們可以在Vue的兩個Ionic頁面之間自由切換了。

頁面過渡動畫

我們現在可以在兩個Ionic頁面之間切換，不過執行程式碼你會注意到頁面之間的過渡太過突兀。這可能有點不友好, 因為在兩個頁面之間轉換時通常會出現各種型別的頁面轉換動畫。

Angular裡使用NavController自動幫我們處理好了這件事，不過現在我們不能用那個，怎麼辦呢？

幸運的是，Vue對像這樣的過渡動畫有著非常好的支援。為了設定一個全域性的過渡動畫，我們使用Vue文件裡的一個例子。

如下修改src/App.vue：

<template>
  <div id="app">
    <transition name="slide-fade">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>

我們將router-view放在了transition（當它們離開或者進入時可以產生動畫效果的元件）標籤裡面。在這個元件的style標籤裡，我們給它設定了一個叫slide-fade的動畫。這樣修改之後，你在切換兩個頁面會注意到現在有了動畫過渡效果。

雖然這沒有Angular的Ionic服務的預設效果好，不過只要你喜歡你可以設定更復雜的動畫——只是一個關於定義合適動畫效果的問題。如果你願意，你也可以給特定的標籤設定特定的動畫，而不是使用一個全域性的動畫。更多的你可以看看這個。

總結

Ionic/Angular和Ionic/Vue導航最主要的不同點就是在Vue裡我們需要定義路由，因為不依賴於NavController我們需要自己處理頁面過渡動畫。除了一些細微的差別, 基本概念與Ionic/Angular上的導航差不多。