36、Vue.js 单页应用开发与区块链客户端实践

Vue.js 单页应用开发与区块链客户端实践

1. 使用 Vue Router 传递数据

在单页应用开发中，当用户导航到某个路由时，应用可以通过路由参数将数据传递到目标组件。下面我们以一个产品列表应用为例，介绍如何使用 Vue Router 传递数据。

1.1 项目启动

该应用位于 router-product-detail 目录下，启动步骤如下：
1. 运行 npm install 安装依赖。
2. 运行 npm run serve 启动应用，此时会显示产品列表。
3. 点击某个产品，应用将导航到该产品的详情页面。

1.2 路由配置

路由配置文件 router.ts 如下：

import Vue from 'vue';
import Router from 'vue-router';
import ProductDetails from './views/ProductDetails.vue';

Vue.use(Router);

export default new Router({
  base: process.env.BASE_URL,
  mode: 'history',
  routes: [
    {
      path: '/products/:productId',
      component: ProductDetails,
    },
  ],
});