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

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

1. 使用Vue Router传递数据开发单页应用

1.1 应用概述

当用户导航到某个路由时，应用可以通过路由参数将数据传递到目标组件。这里有一个渲染产品列表的应用示例，当用户选择一个产品时，应用会导航到产品详情视图，显示所选产品的信息。该应用位于 router-product-detail 目录下。

1.2 运行应用

操作步骤如下：
1. 打开终端，进入 router-product-detail 目录。
2. 运行 npm install 安装依赖。
3. 运行 npm run serve 启动应用。
4. 打开浏览器，即可看到产品列表。点击某个产品，应用将导航到该产品的详情页面。

1.3 应用组件与路由配置

该应用只有两个组件： App 和 ProductDetail 。路由配置如下：

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_UR