87,996
社区成员
发帖
与我相关
我的任务
分享vue element 主菜单怎样添加参数
路由配置如下
{
path: 'list',
name: 'SalesList',
component: () => import('@/views/business/sales/index'),
meta: { title: '销售订单列表', icon: 'table' }
}
左侧菜单中就有“销售订单列表”的菜单项，点击后会跳转到http://localhost:9527/#/sales/list
请问，如果我想点击这个菜单项时加上若干个参数，例如 http://localhost:9527/#/sales/list?qd1=abc&qd2=123&qd3=456 .....
那么我应该处理？
{
path: 'list',
name: 'SalesList',
component: () => import('@/views/business/sales/index'),
meta: { title: '销售订单列表', icon: 'table' }
}
左侧菜单中就有“销售订单列表”的菜单项，点击后会跳转到http://localhost:9527/#/sales/list
请问，如果我想点击这个菜单项时加上若干个参数，例如 http://localhost:9527/#/sales/list?qd1=abc&qd2=123&qd3=456 .....
那么我应该处理？
...全文
请发表友善的回复…
发表回复
立早家饰 2021-05-15
- 打赏
- 举报
这样的话，是不是每次跳转时都必须带上这几个参数？因为其它业务查询可能不需要这几个参数[/quote]
……方法很多呀。你认真看下Vue的路由，然后自己试下不就知道了？
你可以在这个规则下面加上你原有规则。或者加一个跳转的规则：
{
path: 'list',
redirect: 'list/qd1/默认值/qd2/默认值/qd3/默认值'
}
但不管你怎么处理，因为你用了动态参数，调用的组件是同一个，所以你需要对路由进行侦听，通过路由中的params来切换业务逻辑。如果你不想这样弄，你就使用query呀。vue本身就有
<router-link :to='{name:"SalesList",query:{qd1:'abc',qd2:'123',qd3:'456'}}'>
或者
<router-link :to='{path:"/sales/list",query:{qd1:'abc',qd2:'123',qd3:'456'}}'>
都可以，然后使用this.$route.query就可以获取对应的qd1,qd2,qd3。使用query，你就可以只在一些特殊的跳转上面加上query。当然，想动态处理，你还是需要对路由进行侦听，不过这样就是得通过路由中的query来切换逻辑了[/quote]
我想到了一个笨方法
1：修改路由设置 src\router\index.js
{
path: 'list',
name: 'SalesList',
component: () => import('@/views/business/sales/index'),
meta: { title: '销售订单列表', icon: 'table' },
menuDefaultQuery: 'qdr=mbn1' // 20210514 加上一个默认参数，只针对主菜单，配合SidebarItem.vue使用
},
2：修改src\layout\components\Sidebar\sidebarItem.vue
修改函数resolvePath，加多一个参数
<template>
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.menuDefaultQuery)">
<el-menu-item :index="resolvePath(onlyOneChild.path, onlyOneChild.menuDefaultQuery)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" />
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path, item.menuDefaultQuery)" popper-append-to-body>
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="generateTitle(item.meta.title)" />
</template>
<sidebar-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu>
</div>
</template>
......
......
......
// resolvePath(routePath) {
// if (isExternal(routePath)) {
// return routePath
// }
// if (isExternal(this.basePath)) {
// return this.basePath
// }
// return path.resolve(this.basePath, routePath)
// },
// 20210514 加上一个routeQuery参数，只针对主菜单，配合路由设置得menuDefaultQuery使用
resolvePath(routePath, routeQuery) {
let s = ''
if (isExternal(routePath)) {
s = routePath
} else if (isExternal(this.basePath)) {
s = this.basePath
} else {
s = path.resolve(this.basePath, routePath)
}
if (typeof routeQuery !== 'undefined') {
s = s + (s.indexOf('?') >= 0 ? '&' : '?') + routeQuery
}
return s
},
此法就是针对主菜单的，其它地方就用<router-link :to='{path:"/sales/list",query:{参数视实际情况而定}}'>
泡泡鱼_ 2021-05-13
- 打赏
- 举报
这样的话，是不是每次跳转时都必须带上这几个参数？因为其它业务查询可能不需要这几个参数[/quote]
……方法很多呀。你认真看下Vue的路由，然后自己试下不就知道了？
你可以在这个规则下面加上你原有规则。或者加一个跳转的规则：
{
path: 'list',
redirect: 'list/qd1/默认值/qd2/默认值/qd3/默认值'
}
但不管你怎么处理，因为你用了动态参数，调用的组件是同一个，所以你需要对路由进行侦听，通过路由中的params来切换业务逻辑。如果你不想这样弄，你就使用query呀。vue本身就有
<router-link :to='{name:"SalesList",query:{qd1:'abc',qd2:'123',qd3:'456'}}'>
或者
<router-link :to='{path:"/sales/list",query:{qd1:'abc',qd2:'123',qd3:'456'}}'>
都可以，然后使用this.$route.query就可以获取对应的qd1,qd2,qd3。使用query，你就可以只在一些特殊的跳转上面加上query。当然，想动态处理，你还是需要对路由进行侦听，不过这样就是得通过路由中的query来切换逻辑了
立早家饰 2021-05-13
- 打赏
- 举报
这样的话，是不是每次跳转时都必须带上这几个参数？因为其它业务查询可能不需要这几个参数
立早家饰 2021-05-12
- 打赏
- 举报
参数不固定，可以有多个，看查询业务需要。
在点击主菜单时带有其中固定的几个，而在项目其它地方打开该页面时就不一定是这些参数。
请问这个该怎么处理？
泡泡鱼_ 2021-05-12
- 打赏
- 举报
后面那种，你跳转的链接地址就应该是：list/qd1/abc/qd2/123/qd3/456
泡泡鱼_ 2021-05-12
- 打赏
- 举报
路由有动态参数的呀！path: 'list/:qd1/:qd2/:qd3'
然后你跳转的链接:list/abc/123/456。this.$route.params.qd1这样去获取值就行了
也可以在path中加上参数名，path: 'list/qd1/:qd1/qd2/:qd2/qd3/:qd3'但取值都是一样的
简_洋 2021-05-12
- 打赏
- 举报
你这几个参数是固定的吗? 如果是固定的就在路由拦截器里面加一下。
