动态路由的带参

[yogwang]

版本号：

version:2.1.0（发布日期：20190826）

问题描述：

在菜单管理中如技术文档里边所说，填写 /UserInfo/:id ，
并在页面中使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>
点击按钮跳转会到 / ，并不会跳转到 /UserInfo/123456 ，提示 [vue-router] Route with name 'UserInfo' does not exist 。
使用 <router-link :to="'UserInfo/'+id" />查看</router-link> 就可以。
在Vue DevTools中检查发现，UserInfo 对应的是 Name 是 UserInfo-@id

截图&代码：

使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>

使用 <router-link :to="'UserInfo/'+id" />查看</router-link>

附

vue@^2.6.10
@vue/cli@^3.8.0
vue-router@^3.0.1

2019年10月25日更新，

使用 :to="'UserInfo/'+id" 点击多个查看用户后，会创建多个用户资料标签，并且没有激活的方法，来重新获取用户 ID。

👉 修改 : 菜单管理中，最后不添加 /:id ,
使用 :to="{name:'UserInfo', params: {id:id}}" 直接传参开的标签可以获得 ID，之后也不会再创建一个新标签。

[zhangdaiscott]

jeecgboot 针对路由组件的名字做了规则处理，所以默认不是UserInfo

1. 如果自定义了路由组件名，则采用自定义名；
2. 未定义路由name (通过URL生成路由name,路由name供前端开发，页面跳转使用)

org.jeecg.modules.system.controller.SysPermissionController#getPermissionJsonObject
自定义name规则

如果你需要自定义组件名，可以手工改下数据库字段

[wangkaiChen1118]

版本号：

version:2.1.0（发布日期：20190826）

问题描述：

在菜单管理中如技术文档里边所说，填写 /UserInfo/:id ，
并在页面中使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>
点击按钮跳转会到 / ，并不会跳转到 /UserInfo/123456 ，提示 [vue-router] Route with name 'UserInfo' does not exist 。
使用 <router-link :to="'UserInfo/'+id" />查看</router-link> 就可以。
在Vue DevTools中检查发现，UserInfo 对应的是 Name 是 UserInfo-@id

截图&代码：

使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>

使用 <router-link :to="'UserInfo/'+id" />查看</router-link>

附

vue@^2.6.10
@vue/cli@^3.8.0
vue-router@^3.0.1

2019年10月25日更新，

使用 :to="'UserInfo/'+id" 点击多个查看用户后，会创建多个用户资料标签，并且没有激活的方法，来重新获取用户 ID。

👉 修改 : 菜单管理中，最后不添加 /:id ,
使用 :to="{name:'UserInfo', params: {id:id}}" 直接传参开的标签可以获得 ID，之后也不会再创建一个新标签。

请问这个动态生成的路由名称，如果想要生成的 路由的name 后边不带 @参数 , 这个需要后端来修改吗？

[yogwang]

版本号：

version:2.1.0（发布日期：20190826）

问题描述：

在菜单管理中如技术文档里边所说，填写 /UserInfo/:id ，
并在页面中使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>
点击按钮跳转会到 / ，并不会跳转到 /UserInfo/123456 ，提示 [vue-router] Route with name 'UserInfo' does not exist 。
使用 <router-link :to="'UserInfo/'+id" />查看</router-link> 就可以。
在Vue DevTools中检查发现，UserInfo 对应的是 Name 是 UserInfo-@id

截图&代码：

使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>

使用 <router-link :to="'UserInfo/'+id" />查看</router-link>

附

vue@^2.6.10
@vue/cli@^3.8.0
vue-router@^3.0.1

2019年10月25日更新，

使用 :to="'UserInfo/'+id" 点击多个查看用户后，会创建多个用户资料标签，并且没有激活的方法，来重新获取用户 ID。
👉 修改 : 菜单管理中，最后不添加 /:id ,
使用 :to="{name:'UserInfo', params: {id:id}}" 直接传参开的标签可以获得 ID，之后也不会再创建一个新标签。

请问这个动态生成的路由名称，如果想要生成的 路由的name 后边不带 @参数 , 这个需要后端来修改吗？

上边的回复里说了呀。

[wangkaiChen1118]

版本号：

version:2.1.0（发布日期：20190826）

问题描述：

在菜单管理中如技术文档里边所说，填写 /UserInfo/:id ，
并在页面中使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>
点击按钮跳转会到 / ，并不会跳转到 /UserInfo/123456 ，提示 [vue-router] Route with name 'UserInfo' does not exist 。
使用 <router-link :to="'UserInfo/'+id" />查看</router-link> 就可以。
在Vue DevTools中检查发现，UserInfo 对应的是 Name 是 UserInfo-@id

截图&代码：

使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>

使用 <router-link :to="'UserInfo/'+id" />查看</router-link>

附

vue@^2.6.10
@vue/cli@^3.8.0
vue-router@^3.0.1

2019年10月25日更新，

使用 :to="'UserInfo/'+id" 点击多个查看用户后，会创建多个用户资料标签，并且没有激活的方法，来重新获取用户 ID。

👉 修改 : 菜单管理中，最后不添加 /:id ,
使用 :to="{name:'UserInfo', params: {id:id}}" 直接传参开的标签可以获得 ID，之后也不会再创建一个新标签。

版本号：

version:2.1.0（发布日期：20190826）

问题描述：

在菜单管理中如技术文档里边所说，填写 /UserInfo/:id ，
并在页面中使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>
点击按钮跳转会到 / ，并不会跳转到 /UserInfo/123456 ，提示 [vue-router] Route with name 'UserInfo' does not exist 。
使用 <router-link :to="'UserInfo/'+id" />查看</router-link> 就可以。
在Vue DevTools中检查发现，UserInfo 对应的是 Name 是 UserInfo-@id

截图&代码：

使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>

使用 <router-link :to="'UserInfo/'+id" />查看</router-link>

附

vue@^2.6.10
@vue/cli@^3.8.0
vue-router@^3.0.1

2019年10月25日更新，

使用 :to="'UserInfo/'+id" 点击多个查看用户后，会创建多个用户资料标签，并且没有激活的方法，来重新获取用户 ID。
👉 修改 : 菜单管理中，最后不添加 /:id ,
使用 :to="{name:'UserInfo', params: {id:id}}" 直接传参开的标签可以获得 ID，之后也不会再创建一个新标签。

请问这个动态生成的路由名称，如果想要生成的 路由的name 后边不带 @参数 , 这个需要后端来修改吗？

上边的回复里说了呀。

这样设置是不会创建一个新标签来，但是此时相当于 params 传参，如果用户手动刷新页面，就会导致参数丢失

[yogwang]

版本号：

version:2.1.0（发布日期：20190826）

问题描述：

在菜单管理中如技术文档里边所说，填写 /UserInfo/:id ，
并在页面中使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>
点击按钮跳转会到 / ，并不会跳转到 /UserInfo/123456 ，提示 [vue-router] Route with name 'UserInfo' does not exist 。
使用 <router-link :to="'UserInfo/'+id" />查看</router-link> 就可以。
在Vue DevTools中检查发现，UserInfo 对应的是 Name 是 UserInfo-@id

截图&代码：

使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>

使用 <router-link :to="'UserInfo/'+id" />查看</router-link>

附

vue@^2.6.10
@vue/cli@^3.8.0
vue-router@^3.0.1

2019年10月25日更新，

使用 :to="'UserInfo/'+id" 点击多个查看用户后，会创建多个用户资料标签，并且没有激活的方法，来重新获取用户 ID。
👉 修改 : 菜单管理中，最后不添加 /:id ,
使用 :to="{name:'UserInfo', params: {id:id}}" 直接传参开的标签可以获得 ID，之后也不会再创建一个新标签。

版本号：

version:2.1.0（发布日期：20190826）

问题描述：

在菜单管理中如技术文档里边所说，填写 /UserInfo/:id ，
并在页面中使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>
点击按钮跳转会到 / ，并不会跳转到 /UserInfo/123456 ，提示 [vue-router] Route with name 'UserInfo' does not exist 。
使用 <router-link :to="'UserInfo/'+id" />查看</router-link> 就可以。
在Vue DevTools中检查发现，UserInfo 对应的是 Name 是 UserInfo-@id

截图&代码：

使用 <router-link :to="{name:'UserInfo', params: {id:id}}">查看</router-link>

使用 <router-link :to="'UserInfo/'+id" />查看</router-link>

附

vue@^2.6.10
@vue/cli@^3.8.0
vue-router@^3.0.1

2019年10月25日更新，

使用 :to="'UserInfo/'+id" 点击多个查看用户后，会创建多个用户资料标签，并且没有激活的方法，来重新获取用户 ID。
👉 修改 : 菜单管理中，最后不添加 /:id ,
使用 :to="{name:'UserInfo', params: {id:id}}" 直接传参开的标签可以获得 ID，之后也不会再创建一个新标签。

请问这个动态生成的路由名称，如果想要生成的 路由的name 后边不带 @参数 , 这个需要后端来修改吗？

上边的回复里说了呀。

这样设置是不会创建一个新标签来，但是此时相当于 params 传参，如果用户手动刷新页面，就会导致参数丢失

如果按照他们的方法改写过控制器，就不会丢失参数了。打开在同一个标签页。

[yangfuhua2009]

控制器怎么改写,才不会在刷新页面时丢失params参数

[yogwang]

@yangfuhua2009
org.jeecg.modules.system.controller.SysPermissionController#getPermissionJsonObject
自定义name规则

前端笔记

[yangfuhua2009]

你好,我是用的官方的自定路由规则, this.$router.push({name:'knowledge-CmsArticlechapterList',params:{articleid:id}}); 这样可以正常跳转,只是在f5刷新页面时会丢失params 怎么解决.
特别感谢!!

[yogwang]

org.jeecg.modules.system.controller.SysPermissionController#getPermissionJsonObject
自定义name规则
前端笔记

@yangfuhua2009 添加菜单的同时增加参数就好了。

---

例子：

需求查看从文章列表点击文章跳转到文章详情页面
那么在添加菜单路径的时候就是 /article/detail/:id 后边的 :id 就是你的动态参数名

可以查看 Vue-router 的官方文档，也可以查看我之前回复的笔记链接。

[yangfuhua2009]

看官方回复说 菜单是不加参数的啊
我这边加了参数后就打不开页面了.
我目前用的jeecgboot 2.2 你当时用的2.1会不会有区别

[yogwang]

@yangfuhua2009 😂这个是我的开发笔记....
如果不加 :id 的话，你可以考虑用 query 来传参，参数获取也是使用 .query.xxx 来获取；
如果要用 params 就要加上 :id，同时路由名称就会被改变，但是你用 path 应该没这个问题。

[yangfuhua2009]

真的是已经折腾昨天一天了.用query会打开多个标签页,所以已经放弃了,只能用params,
用params时 菜单路由加:id时,怎么都跳转不成功,
看你文档写的是用这样的方式可以跳转成功.
查看

[yogwang]

@yangfuhua2009 你在添加菜单的时候增加 :id 的参数，但是在跳转操作的的时候就不用加 :id 了，
比如我文档里边的例子来说
在添加菜单的时候，菜单路径为 /UserInfo/:id ，提交之后它的路由名称就会变成 UserInfo-@id;
但是你在跳转的时候就是下边三种情况

1. this.$router.push({name:"UserInfo-@id:", params: {id:id}}) 使用 name 路由
2. this.$router.push({path:"/UserInfo",query:{id:id}}) 使用 path 路由1
3. this.$router.push({path:"/UserInfo/"+id}) 使用 path 路由2

[yangfuhua2009]

通过参数可以跳转了,这是地址http://localhost:3000/knowledge/CmsArticlechapterList/39066bbd0e23fba15b3e2674a543247f
这样有个问题是多个标签页打开的,可以控件到单个标签页打开吗

[yogwang]

@yangfuhua2009 我记得之前是可以了，后来就没注意的了。

[King10031]

通过参数可以跳转了,这是地址http://localhost:3000/knowledge/CmsArticlechapterList/39066bbd0e23fba15b3e2674a543247f
这样有个问题是多个标签页打开的,可以控件到单个标签页打开吗

问题解决了吗 ？

[King10031]

我也是会最终 通过 query会打开两个压面

[yogwang]

我也是会最终 通过 query会打开两个页面

可以试试用固定的path，然后不增加动态参数然后用params来传参看看，我现在是魔改的Layout没有tabs了。

[King10031]

老哥 麻烦看一下我的帖子
#2888