vue 2 + vue-router 2 實現SPA

一隻瓦罐發表於2017-01-11
Vue

github專案地址請點這裡。

使用 Vue.js 時，我們就已經把元件組合成一個應用了，當我們要把 vue-router 加進來，只需要配置元件和路由對映，然後告訴 vue-router 在哪裡渲染它們。

先來看一下官方提供的最簡單的例子：

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>

從HTML檔案裡面我們需要學會的是：

  1. <router-link>標籤是我們要跳轉的連結，to=””是必須的屬性，雙引號中的內容是我們接下來在JS檔案中定義的路由path。
  2. <router-view>標籤是展示我們匹配到的元件的區域。

JavaScript

// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)

// 1. 定義（路由）元件。
// 也可以從其他檔案 import 進來
const Foo = { template: `<div>foo</div>` }
const Bar = { template: `<div>bar</div>` }

// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
const routes = [
  { path: `/foo`, component: Foo },
  { path: `/bar`, component: Bar }
]

// 3. 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount(`#app`)

// 現在，應用已經啟動了！

JavaScript檔案主要做的事情是：

  1. 定義路由列表，即routes。
  2. 建立router例項及router配置，即router。
  3. 建立和掛載根例項。

以上只是教我們用最簡單的方法使用vue-router。但實際開發過程中，首先我們的vue元件顯然不會只有一個template模板這麼簡單，會用到vue的單檔案元件；其次我們通常會希望<router-view>的範圍是整個頁面，而不是像現在這樣一直有幾個礙眼的導航存在於頁面上，這就需要先定義好預設狀態下<router-view>顯示的內容。

既然是單頁應用（SPA），那麼整個專案有以下三個檔案是必要的:

  1. 一個html檔案：index.html
  2. 一個webpack打包時的入口js檔案：main.js
  3. 一個根vue元件，作為其他元件的掛載點：app.vue

另外還有兩個自定義元件：homepage.vue和chat.vue。我們希望的結果是他們之間互相跳轉。

下面看下這幾個檔案的具體內容：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js v2</title>
</head>
<body>
  <!--因為我們用App.vue作為根元件，這裡只需要寫一個渲染用的掛載元素#application即可-->
  <div id="application"></div>
  <!--這裡的dist目錄是webpack打包後的js檔案的路徑-->
  <script src="dist/main.js"></script>
</body>
</html>

main.js

這裡我們選擇把路由配置也寫到main.js中，你也可以寫到一個單獨的router.js中再引入到main.js中。

//引入vue、vue-router和根元件app.vue
import Vue from `vue`
import VueRouter from `vue-router`
import App from `./components/app.vue`

Vue.use(VueRouter)

// 引入自定義元件
import HomePage from `./components/homepage.vue`
import Chat from `./components/chat/chat.vue`

//定義路由
const routes = [
    //這裡 path: `/` 代表應用首頁顯示的內容
    { path: `/`, component: HomePage },
    { path: `/chat`, component: Chat }
];

//建立router例項
const router = new VueRouter({
  //mode指定路由模式，預設`hash`，另一種可選的模式是`history`
  mode: `hash`,
  routes,
});

new Vue({
  el: `#application`,
  router,
  render: h => h(App) //用render函式渲染引入的元件App.vue到index.html中的#application元素中
})

app.vue

<template lang="html">
  <div id="app">
    <!--這裡是元件的渲染區域-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
}
</script>

自定義元件 homepage.vue

這個元件的內容也是進入應用預設展示的頁面內容。

<template>
    <div>
        <h1>homepage</h1>
        <router-link to="/chat">Go to chat</router-link>
    </div>
</template>

自定義元件 chat.vue

<template>
    <div>
        <h1>Chat</h1>
        <router-link to="/">Go to homepage</router-link>
    </div>
</template>

寫完後你會發現這兩個頁面是互相跳轉的，沒錯，就是這樣。

一般我們會把路由資訊routes提取到一個單獨的檔案中，像這樣：

路由資訊提取到單獨檔案中 route-config.js: 

import HomePage from `./components/homepage.vue`
import Chat from `./components/chat/chat.vue`

export default [
    { 
        path: `/`,
        component: HomePage 
    },
    { 
        path: `/chat`, 
        component: Chat 
    }
];

然後在main.js中引入： import routes from `./route-config.js` 就可以了。

參考文獻：

  1. vue-router 2官方文件： http://router.vuejs.org/zh-cn/
  2. Vue-router2.0學習筆記： https://segmentfault.com/a/11…
  3. vue2.0構建單頁應用最佳實戰： https://segmentfault.com/a/11…
  4. 一個完整的vue應用 ( vuex+vue-router ) 起手： https://segmentfault.com/a/11…

相關文章