vue-router4无法接收params参数的问题

最新推荐文章于 2024-04-15 11:12:07 发布
最新推荐文章于 2024-04-15 11:12:07 发布
阅读量1.7k 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mad_house/article/details/126977237
版权

原因：

vue-router 在4.1.4版本有一个更新：删除了没有定义在path里的params。
参见release记录：https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md

解决方法：

  1. 回退vue-router的版本：在package.json里，将"vue-router": “^4.0.x"改为"vue-router”: “~4.0.x”。
  2. 使用状态管理工具，如vuex、pinia，记录需要传递的数据
jshmsqt
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
router4+跳转的数据传递
wang-ccnu的博客
05-13 348
利用router4实现页面跳转时，页面之间的数据传递
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter 基本 Taro ，扩展成 vue-router 的使用体验 Installation npm i vue-taro-router -S Usage // router.js import VueTaroRouter from "vue-taro-router"; const router = new VueTaroRouter(); // 添加拦截器 router .beforeEach((to, from, next) => { console.log(to); console.log(from); next(); }) .beforeEach((to, from, next) => { if (~to.path.indexOf("abc2")) { // 在拦截器里重定向 next({
解决Vue Router4中params 传参失效和报错问题
LP'S Blog
02-27 4497
在使用vue-router4中params 进行路由组件之间传参，跳转页面接收不了并出现如下错误如下是我的代码传输页面接收页面。
Vue-Router4路由传参详解
最新发布
qq_44741577的博客
04-15 800
当props为一个对象，路由参数key和value就定死了。这两种传参方式一样，本文只以声明式举例，编程式跳转的。query传参的特点参数会在路由路径后面。对象，可以根据这个路由信息按需返回参数。只能接收params参数。函数的参数就是当前的。
vue-router4.x的笔记
arkwok的专栏
01-09 388
【代码】vue-router4.x的笔记。
记录--关于vue-router4+TS传参使用params undefined问题
weixin_41611635的博客
07-25 1902
记录--关于vue-router4+TS传参使用params undefined问题
vue3.0路由params传参无法接收的问题
sinat_39305013的博客
04-21 8111
1.跳转到父路由，父路由redirect到子路由的方式无法接收到params参数。 2.route里要增加props:true的相关配置。 { path: '/login', name: 'Login', component: () => import('../views/Login/Login.vue'), props: true } 3.接收参数的页面通过props接收参数 const props = defineProps({ text:String,
Vue Router4 ，prams 传参失效和报错问题
Ly
01-05 2593
Vue3 使用 Vue Router4 时，prams 传参失效和报错问题，Discarded invalid param(s) “id“, “name“, “age“ when navigating，https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22；to save it to the History API state:
vue-router四种参数传递
逆天的博客
09-29 849
目录1.用name传参2.通过标签中的to传参3.利用url传参4.编程式导航中获取参数 1.用name传参 2.通过标签中的to传参 index.js中name的值为hello2 index.vue页面 从index中点击： 3.利用url传参 点击去往： 此时，如果不传参，页面将无法访问 4.编程式导航中获取参数 去往hi页面的name为hi 接收： 运行： ...
vue3路由传参获取不到params，获取到为空
liuzaixi的博客
08-17 3582
注意：从Vue Router的2022-8-22 更新后，我们使用param传参在新页面无法获取数据。
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router路由参数刷新消失的问题解决方法
08-30
本篇文章主要介绍了vue-router路由参数刷新消失的问题解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue-router 四.路由传参
weixin_43995121的博客
06-24 1485
编程式导航 使用 router push 或者 replace 的时候 改为对象形式新增 query 必须传入一个对象，会将 query 对象展示在 路由路径(url) 上 在地址中显示的传递的参数数据： 使用 useRoute 的 query 将参数进行取： 编程式导航 使用 router push 或者 replace 的时候 改为对象形式并且只能使用 name，path 无效，然后传入 params 地址栏并没有任何信息 接受参数使用 useRoute 的 params 注意：这里会有一个问题，用pa
vue3 vue-route4跳转新页面无法获取params参数
mini_xiang的博客
01-05 1093
/一定要使用 params})参考链接：https://blog.csdn.net/qq_38666931/article/details/111308803。
vue-router4 (五) 路由传参的2种方法
2301_76510083的博客
02-27 565
vue-router4 (五) 路由传参的2种方法
vue url 使用$router.resolve跳页面,不能系统跳页面传参和接收参数
周家大小姐
05-14 4413
传参: //把参数拼起来当url拼进地址栏 const routeData = this.$router.resolve({ path: '/monthly-commissioner', query: { userName: this.userInfo.userName, stateDate: allowAddDate, .
vue-router 的params query传参例子
04-01
假设我们有两个页面，分别是 `Home.vue` 和 `Article.vue`，我们需要在 `Home.vue` 页面中点击某个文章链接跳转到 `Article.vue` 页面，并且传递文章的 id 和 title 信息。 在 `Home.vue` 页面中，我们可以这样定义链接： ```html <router-link :to="{ name: 'article', params: { id: 1, title: 'Vue Router' }, query: { category: 'web' } }">查看文章</router-link> ``` 这里我们使用了 `router-link` 组件来创建链接，`to` 属性指定了链接的目标地址，其中： - `name: 'article'` 表示目标页面的路由名称是 `article`，这个名称是在路由配置中定义的； - `params: { id: 1, title: 'Vue Router' }` 表示传递了两个路由参数，一个是 `id`，值为 `1`，另一个是 `title`，值为 `Vue Router`； - `query: { category: 'web' }` 表示传递了一个查询参数，键为 `category`，值为 `web`。 在路由配置中，我们需要定义 `article` 页面的路由规则，并且指定 `id` 和 `title` 作为路由参数： ```javascript const routes = [ { path: '/', name: 'home', component: Home }, { path: '/article/:id/:title', name: 'article', component: Article, props: true } ] ``` 这里我们使用了动态路由参数来接收 `id` 和 `title` 的值，`props: true` 表示将路由参数作为组件的 props 传递给目标组件。 在 `Article.vue` 组件中，我们可以这样获取路由参数和查询参数： ```javascript export default { name: 'Article', props: ['id', 'title'], created() { console.log(this.id, this.title) // 输出 1 'Vue Router' console.log(this.$route.query.category) // 输出 'web' } } ``` 这里我们通过 props 接收路由参数，并在 `created` 钩子函数中输出参数的值，同时使用 `$route.query` 获取查询参数的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值