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

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

1. 使用Vue Router开发单页应用

1.1 路由传参

当用户导航到路由时，应用可以使用路由参数将数据传递到目标组件。以一个渲染产品列表的应用为例，当用户选择一个产品时，应用会导航到该产品的详细信息页面。

这个应用位于 router-product-detail 目录下，操作步骤如下：
1. 运行 npm install 安装依赖。
2. 运行 npm run serve 启动服务，产品列表将显示出来。
3. 点击某个产品，应用将导航到该产品的详细信息页面。

1.2 应用组件与路由配置

该应用只有两个组件： 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_URL,
  mode: 'history',
  routes: [
    {
      path: '/products/:productId',
      component: Prod