通过 Vue Router 配置前端路由

单页面应用的实现有赖于 HTML 5 History API,不过现在让你从头学习 HTML 5 History API 肯定不现实,好在 Vue Router 帮我们处理了几乎所有底层操作,比如推入和弹出状态,而且我们通过 Vue 构建应用,使用起来会更加如鱼得水,并且可以和 Vue 中的其他组件无缝对接。

在这篇教程中,我们会设置首页路由、咖啡店列表路由、咖啡店详情页路由、以及新增咖啡店路由,需要注意的是,这些只是前端路由,对应的后端 API 路由会在下一篇教程中添加。

第一步:配置路由文件

打开 resources/assets/js/routes.js 文件,我们将在这个文件中维护应用的所有前端路由。首先,需要导入 Vue 和 Vue Router 并告知 Vue 我们使用 Vue Router 来处理应用路由:

/*
 |-------------------------------------------------------------------------------
 | routes.js
 |-------------------------------------------------------------------------------
 | Contains all of the routes for the application
 */

/**
 * Imports Vue and VueRouter to extend with the routes.
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

/**
 * Extends Vue to use Vue Router
 */
Vue.use( VueRouter )

第二步:添加路由

我们需要将以下四个前端路由添加到应用中:

  • / - 首页
  • /cafes - 咖啡店列表
  • /cafes/new - 新增咖啡店
  • /cafes/:id - 显示单个咖啡店

对于如何添加路由,Vue Router 文档写的非常详细。和 Laravel 一样,在 Vue Router 中也可以使用命名路由

在 Vue Router 路由数组中,每个路由都是一个对象,由于我们将路由放到了不同的文件中,所以需要导出默认模块以便可以将其导入到 app.js 文件。

添加路由后的 resources/assets/js/routes.js 文件内容如下:

/*
 |-------------------------------------------------------------------------------
 | routes.js
 |-------------------------------------------------------------------------------
 | Contains all of the routes for the application
 */

/**
 * Imports Vue and VueRouter to extend with the routes.
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

/**
 * Extends Vue to use Vue Router
 */
Vue.use( VueRouter )

/**
 * Makes a new VueRouter that we will use to run all of the routes for the app.
 */
export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Vue.component( 'Home', require( './pages/Home.vue' ) )
        },
        {
            path: '/cafes',
            name: 'cafes',
            component: Vue.component( 'Cafes', require( './pages/Cafes.vue' ) )
        },
        {
            path: '/cafes/new',
            name: 'newcafe',
            component: Vue.component( 'NewCafe', require( './pages/NewCafe.vue' ) )
        },
        {
            path: '/cafes/:id',
            name: 'cafe',
            component: Vue.component( 'Cafe', require( './pages/Cafe.vue' ) )
        }
    ]
});

每个路由都有一个名字,以便我们在应用中直接通过名字就可以访问该路由。此外,在每个路由还有一个 component 对象,用于定义渲染每个页面的 Vue 组件,上一篇教程中已经提及,我们会将这些页面存放到 resources/assets/js/pages 目录下。最后需要注意的是最后一个路由 /cafes/:id 包含 :id 参数,表明它是一个动态路由,我们可以通过传入指定 ID 参数来加载对应的咖啡店详情。

第三步:添加页面组件

在 Vue Router 中,所有被渲染的页面都是组件。在上一篇教程中,我们创建了 resources/assets/js/pages 来存放这些页面组件,根据上一步定义的路由,需要创建如下文件:

  • resources/assets/js/pages/Cafe.vue
  • resources/assets/js/pages/Cafes.vue
  • resources/assets/js/pages/Home.vue
  • resources/assets/js/pages/NewCafe.vue

接下来将以下内容填充到上面四个文件:

<style>

</style>

<template>
  <div>

  </div>
</template>

<script>
  export default {

  }
</script>

如果你之前没使用过单文件 Vue 组件,可以先阅读对应官方文档,简单来说,其实就是将页面的 JavaScript、CSS、HTML 都塞到一个文件中。由于我们使用的是 Laravel 和 Laravel Mix,这些组件的编译功能是开箱可用的。

第四步:将路由导入 app.js

现在我们可以将路由导入 resources/assets/js/app.js 了。

import Vue from 'vue';

之后插入如下这行代码:

import router from './routes.js'

接下来告知 Vue 实例使用刚刚导入的 router

new Vue({
    router
}).$mount('#app') 

第五步:构建应用

现在我们已经配置好了 Vue、axios 和 Vue Router,如果没有运行 npm run watch 实时监听前端文件变动并重新编译构建应用,也可以在开发环境每次手动运行 npm run dev 来编译构建应用。

现在页面仍然没有任何数据和功能,但是已经可以通过 Vue 开发者工具看到路由信息了:

vue router

在下一篇教程添加完后端 API 路由之后就可以使用 Axios 来发送 HTTP 请求到后端 API 获取数据,我们将在 Laravel 后端构建 API,在前端通过 JavaScript 请求这些 API,然后配置 Vuex 来保存返回的数据,在此基础上,我们就可以为 Roast 应用开发出一些实际的功能了。

项目源码位于 Github 上:nonfu/roastapp

上一篇: 引入 Vue 2、Vue Router 和 Vuex

下一篇: 实现 Laravel 后端 API 接口