Vue.js + Vue Router 开发 SPA 应用：从入门到实践-JavaScript中文网-JavaScript教程资源分享门户

Vue.js + Vue Router 开发 SPA 应用：从入门到实践

随着Web应用程序的不断发展，特别是在移动端应用领域，SPA（Single-page Application，单页应用）的开发愈来愈普遍，Vue.js + Vue Router 是目前最为流行的SPA应用开发解决方案。本文将详细介绍Vue.js和Vue Router的基本使用，以及通过实例代码展示如何使用Vue.js和Vue Router开发真正的SPA应用。

Vue.js简介

Vue.js 是一个基于 MVVM 设计模式的渐进式 JavaScript 框架，它有一些主要的特点：

超快速的虚拟 DOM 渲染，提高性能和用户体验；
组件系统，使得代码可复用和可维护性更强；
响应式数据绑定和计算属性，实时更新和展示数据；
生命周期钩子函数，实现灵活的业务逻辑。

下面是一个简单的Vue.js组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js Demo',
      message: 'Hello, Vue.js World!',
    };
  },
};
</script>

Vue Router简介

Vue Router 是Vue.js官方的路由管理插件，它集成了Vue.js的核心特性，可以方便地实现多视图的SPA应用开发。Vue Router提供了以下一些功能：

路由参数传递和拦截器处理；
嵌套路由和动态路由；
路由懒加载和代码分割；
历史记录管理和路由跳转。

下面是一个基本的Vue Router示例：

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

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

SPA应用开发实践

下面将通过一个简单的实例介绍如何使用Vue.js和Vue Router开发SPA应用，实例完成了一个基于Vue.js和Vue Router实现的Todo List应用，包括添加、编辑、删除、标记为已完成以及筛选等功能。

前置条件

在开始开发之前，请确保已安装以下软件：

Node.js
Vue CLI

$ npm install -g @vue/cli

创建Vue项目

使用Vue CLI创建一个基础的Vue项目：

$ vue create todo-list

然后选择默认配置即可。

安装Vue Router

$ npm install vue-router --save

创建组件

在src/components目录下，创建三个新组件：TodoAdd.vue、TodoList.vue和TodoFilter.vue，分别实现添加任务、列表展示和筛选功能。

在TodoAdd.vue中，实现添加任务的表单：

<template>
  <form @submit.prevent="submit">
    <input type="text" v-model="title" placeholder="Add a task..." />
    <button type="submit">Add</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      title: '',
    };
  },
  methods: {
    submit() {
      this.$emit('add', this.title);
      this.title = '';
    },
  },
};
</script>

在TodoList.vue中，展示任务列表，并提供编辑和删除功能：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.done" />
      <span>{{ item.title }}</span>
      <button @click.prevent="$emit('edit', index)">Edit</button>
      <button @click.prevent="$emit('remove', index)">Delete</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: { type: Array, default: [] },
  },
};
</script>

在TodoFilter.vue中，提供筛选功能：

<template>
  <div>
    Filter:
    <button :class="{ active: selected==null }" @click="$emit('filter', null)">All</button>
    <button :class="{ active: selected==false }" @click="$emit('filter', false)">Active</button>
    <button :class="{ active: selected==true }" @click="$emit('filter', true)">Completed</button>
  </div>
</template>

<script>
export default {
  props: {
    selected: { type: Boolean, default: null },
  },
};
</script>

其中用到了组件传递数据和事件的概念。

创建路由

在src目录下，创建router.js文件，并添加以下内容：

import Vue from 'vue';
import VueRouter from 'vue-router';
import TodoList from './views/TodoList.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: TodoList,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

创建视图

在src/views目录下，创建TodoList.vue文件，并添加以下内容：

<template>
  <div>
    <h1>Todo List</h1>

    <todo-add @add="addItem" />

    <todo-list
      :items="displayedItems"
      @edit="editItem"
      @remove="removeItem"
    />

    <todo-filter :selected="completedFilter" @filter="setFilter" />

    <router-link to="/about">About</router-link>
  </div>
</template>

<script>
import TodoAdd from '@/components/TodoAdd.vue';
import TodoList from '@/components/TodoList.vue';
import TodoFilter from '@/components/TodoFilter.vue';

let nextId = 1;

export default {
  components: {
    TodoAdd,
    TodoList,
    TodoFilter,
  },
  data() {
    return {
      items: [],
      completedFilter: null,
    };
  },
  computed: {
    displayedItems() {
      if (this.completedFilter === null) {
        return this.items;
      }
      return this.items.filter((item) => item.done === this.completedFilter);
    },
  },
  methods: {
    addItem(title) {
      if (title.trim() != '') {
        this.items.push({
          id: nextId++,
          title,
          done: false,
        });
      }
    },
    editItem(index) {
      const item = this.items[index];
      const newTitle = prompt('Edit', item.title);
      if (newTitle !== null && newTitle.trim() != '') {
        this.items.splice(index, 1, { ...item, title: newTitle });
      }
    },
    removeItem(index) {
      this.items.splice(index, 1);
    },
    setFilter(value) {
      this.completedFilter = value;
    },
  },
};
</script>

其中用到了组件通信、计算属性和方法绑定等概念。

运行应用程序

最后，在命令行上执行以下命令来启动应用程序：

$ npm run serve

然后在浏览器中打开地址 http://localhost:8080/ 即可看到Todo List应用程序。

总结

本实例中，我们通过使用 Vue.js 和 Vue Router 开发了一个常见的 SPA 应用。在实践过程中，我们了解了 Vue.js 和 Vue Router 的基本用法，并通过实例代码展示了如何使用它们轻松地创建一个复杂的应用程序。希望本文能够帮助您更好地掌握 Vue.js 和 Vue Router 的使用技巧，并为您今后的Web应用程序开发提供一些帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a0fba6add4f0e0ff925a4f