Vue2 之 配置路由

​ 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第23天，点击查看活动详情  

前言

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

我曾预料过，我会卡在配置路由这边，但不曾想真的卡在配置路由这个地方，​

 

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

代码

静态路由

第一个 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>

坦言还是写小程序的路由配置比较简单