一、实验目的：

掌握VueRouting related knowledge and application.

二、实验要求：

了解VueRouting related knowledge and related plug-ins、loader的安装与使用
编写程序完成以下实验内容并上交实验报告

三、实验内容：

（一）实验基础

1、.vue文件

.vue文件又叫"单文件组件",Is a style that can be put、逻辑、Templates are written in a file,独立发布、A manageable format.This format needs to be passedwebpack进行处理.

.vueThe file contains three types of top-level language blocks <template>, <script> 和 <style>.这三个部分分别代表了 html、js、css.其中 <template> 和 <style> It supports writing in precompiled languages,If used in the projectscss 预编译,则

.vueFiles may be read as includesHtml、JavaScript、CSS的网页文件,It's just that the native web page file is interpreted and executed,而.vueThe file needs to be compiled and executed.

2、This experiment mainly imitates the textbook“5.3.3 代码实现”Implementation steps in section ,初步掌握VueRouting related knowledge and application methods.

（二）实验题

请使用VueRouting related knowledge is implemented manuallyTab栏切换案例,要求如下.
①创建一个components/Message.vue组件,用来展示页面内容.
②创建3个子路由,分别是“待付款”、“待发货”、“待收货”页面,Write the corresponding content separately on each sub-routing page,页面效果如图所示.

四、设计思路：

创建一个Vue工程,添加vue-router.
创建一个Message.vue,作为主页面,Also used as a jump.
创建view文件夹,放“待付款”、“待发货”、“待收货”页面.
编写router/index.js路由文件.

五、实验过程中遇到的问题及解决手段：

vue-router安装出现问题,解决：使用vue-cliScaffolding creates engineering projects.

六、程序源代码：

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> Items pending payment </h1>
  </div>
</template>

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

src\message\views\receive.vue：

<template>
    <h1> Items awaiting delivery </h1>
</template>

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

<style scoped> </style>

src\message\views\ToBeDelivered.vue：

<template>
  <div class="delivered">
    <h1> Items pending shipment </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

文件目录：