zxj

src/router/index.js

@@ -80,7 +80,7 @@ export const constantRoutes = [
     redirect: 'product-detail',
     children: [
       {
-        path: 'product-detail',
+        path: 'product-detail/:id',
         component: () => import('@/views/product/info/detail/index'),
         name: 'Demo',
         meta: {title: '商品详情', icon: 'dashboard', affix: true}

src/views/product/info/index.vue

@@ -129,6 +129,12 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['product:info:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="handleDetail(scope.row.id)"
+          >查看详细信息</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -773,6 +779,15 @@ export default {
         }
       });
     },
+    /** 查询详细信息 */
+    handleDetail(id){
+      // this.$router.push 是在 SPA 中使用的，不会刷新页面，只会动态地加载或卸载组件
+      this.$router.push("/product-detail/"+id)
+
+      // window.open 会打开一个新的浏览器窗口或标签页，并加载一个全新的页面，这会导致整个页面的刷新
+      // let url = `${window.location.origin}/product-detail/${detailId}`
+      // window.open(url);
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;