Vue2 之 配置路由

前言

因长时间只写小程序项目，不写后管项目，导致我连最基础的路由配置都不会写。原本想的是让大哥把路由配置好，我写页面的，但是呢，┭┮﹏┭┮，有几个页面跟我即将写的内容一模一样，大哥让我直接借鉴。

我曾预料过，我会卡在配置路由这边，但不曾想预料成真，

但没事，卡在这，大哥跟我分析原因，我总结记录下，下次忘记了，可以直接看自己写的文章回忆回忆，真的是 好久不写后管项目真的啥都忘了

代码

静态路由 router / index.js 文件

第一个 path 是主页面   children中的 path 是 点击后跳转的页面的路径

{
    path: "/order/index",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "orderDetail/:orderCode",
        component: () => import("@/views/order/order/orderDetail"),
        name: "orderDetail",
        meta: { title: "详情", activeMenu: "/order/order" },
      },
    ],
  },

我把路由配置错误的原因是 我把主页面 的 index 路径 也配置到 二级路由的路径上 ，导致我点击后跳转还是跳到index文件上，

错误代码

后大哥 把 payOrder 改为 orderDetail文件

 点击跳转

在table 表格点击 参数实现跳转

<el-table-column label="编号" align="center" prop="orderCode" width="280px">
        <template slot-scope="scope">
          <router-link
            :to="'/order/index/orderDetail/' + scope.row.orderCode"
            class="link-type"
          >
            <span>{{ scope.row.orderCode }}</span>
          </router-link>
        </template>
      </el-table-column>

后续 补充

router文件 配置path携带两个参数时

23年 08 25

当在router 文件中配置  path: "index/:id/:stationName"   携带两个参数时

{
    path: "/station/detail",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "index/:id/:stationName",
        component: () => import("@/views/pile/station/detail"),
        name: "stationDetail",
        meta: { title: "详情", activeMenu: "/station/station" },
      },
    ],
  },

 

文件目录

 

它会在地址栏上显示两个参数

在 点击跳转的页面

可以通过

router-link

<el-table-column label="名称" align="center" prop="stationName">
        <template slot-scope="scope">
          <router-link
            :to="
              '/station/detail/index/' +
              scope.row.stationId +
              '/' +
              scope.row.stationName
            "
            class="link-type"
          >
            <span>{{ scope.row.stationName }}</span>
          </router-link>
        </template>
      </el-table-column>

或者是 添加

点击事件

<el-table-column
          prop="stationName"
          label="名称"
          align="center"
          width="130"
        >
          <template slot-scope="scope">
            <span class="link-type" @click="goStationDetail(scope)">{{
              scope.row.stationName
            }}</span>
          </template>
        </el-table-column>

goStationDetail(scope) {
      // console.log(scope,'跳转名称')
      // console.log("跳转详情", scope.row.stationName);
      this.$router.push({
        name: "stationDetail",
        params: {
          id: scope.row.stationId,
          stationName: scope.row.stationName,
        },
      });
    },

一个都不携带参数时

router js文件

{
    path: "/financial/merchant",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "financeDetail",
        component: () => import("@/views/financial/financeDetail"),
        name: "financeDetail",
        meta: { title: "详情", activeMenu: "/financial/merchant" },
      },
    ],
  },

vue文件 

不能使用 :to="'/financial/merchant/financeDetail/' + scope.row.id" 这个方法

因此在 vue文件中 使用 router-link标签 跳转页面时一定要注意 在router文件中配置的 path 有没有携带参数

<template slot-scope="scope">
          <router-link
            :to="{
              path: '/financial/merchant/financeDetail',
              query: {
                merchantId: scope.row.id,
              },
            }"
            class="link-type"
          >
            <span>{{ scope.row.merchantName }}</span>
          </router-link>
        </template>

也可以使用 点击事件进行跳转，  可以借鉴上面的点击事件