前言
因长时间只写小程序项目,不写后管项目,导致我连最基础的路由配置都不会写。原本想的是让大哥把路由配置好,我写页面的,但是呢,┭┮﹏┭┮,有几个页面跟我即将写的内容一模一样,大哥让我直接借鉴。
我曾预料过,我会卡在配置路由这边,但不曾想预料成真,
但没事,卡在这,大哥跟我分析原因,我总结记录下,下次忘记了,可以直接看自己写的文章回忆回忆,真的是 好久不写后管项目真的啥都忘了
代码
静态路由 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>
也可以使用 点击事件进行跳转, 可以借鉴上面的点击事件