技術標籤：VUEvue

一、實驗目的：

掌握Vue路由相關知識及應用。

二、實驗要求：

瞭解Vue路由相關知識和相關外掛、loader的安裝與使用
編寫程式完成以下實驗內容並上交實驗報告

三、實驗內容：

（一）實驗基礎

1、.vue檔案

.vue檔案又叫"單檔案元件"，是一種可以把樣式、邏輯、模板寫在一個檔案裡，獨立釋出、便於管理的格式。這種格式需要通過webpack進行處理。

.vue檔案包含的三種類型的頂級語言塊 <template>, <script> 和 <style>。這三個部分分別代表了 html、js、css。其中 <template> 和 <style> 是支援用預編譯語言來寫的，假若在專案中用了scss 預編譯，則

.vue檔案可能理解成是包含Html、JavaScript、CSS的網頁檔案，只不過原生網頁檔案是解釋執行，而.vue檔案需編譯執行。

2、本次實驗主要通模仿教材“5.3.3 程式碼實現”一節中的實現步驟，初步掌握Vue路由相關知識及應用方法。

（二）實驗題

請使用Vue路由相關知識手動實現Tab欄切換案例，要求如下。
①建立一個components/Message.vue元件，用來展示頁面內容。
②建立3個子路由，分別是“待付款”、“待發貨”、“待收貨”頁面，在每個子路由頁面單獨寫出相應的內容，頁面效果如圖所示。

四、設計思路：

建立一個Vue工程，新增vue-router。
建立一個Message.vue，作為主頁面，同時用作跳轉。

五、實驗過程中遇到的問題及解決手段：

vue-router安裝出現問題，解決：使用vue-cli腳手架建立工程專案。

六、程式原始碼：

Message.vue:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">待付款</router-link> |
      <router-link
 
 to="/about">待發貨</router-link> |
      <router-link to="/receive">待收貨</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

src\message\views\obligation.vue：

<template>
  <div class="home">
    <h1> 待付款商品 </h1>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  components: {
  },
}
</script>

src\message\views\receive.vue：

<template>
    <h1> 待收貨商品 </h1>
</template>

<script>
    export default {
        name: "receive"
    }
</script>

<style scoped>

</style>

src\message\views\ToBeDelivered.vue：

<template>
  <div class="delivered">
    <h1> 待發貨商品 </h1>
  </div>
</template>

src\message\router\index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/obligation.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/ToBeDelivered.vue')
  },
  {
    path: '/receive',
    name: 'receive',
    component: () => import('../views/receive.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

檔案目錄：