Web前端开发技术:Vue路由

一、实验目的：

掌握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，作为主页面，同时用作跳转。
创建view文件夹，放“待付款”、“待发货”、“待收货”页面。
编写router/index.js路由文件。

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

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

文件目录：