【Vue-Router】不跳转的情况下为路由(当前页面)添加query参数

最新推荐文章于 2023-09-08 18:33:42 发布

AI Thabo

最新推荐文章于 2023-09-08 18:33:42 发布

阅读量2.2k

点赞数 1

分类专栏： Vue 文章标签： javascript vue.js 前端前端框架

本文链接：https://blog.csdn.net/m0_46470372/article/details/129962166

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

不跳转的情况下为路由添加query参数

// 不加 path
this.$router.push({
         query: {
          		参数1:值1,
           		参数2:值2 ,
           		...//省略  
         }
})

优惠劵

AI Thabo

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue-Router】不跳转的情况下为路由(当前页面)添加query参数

【代码】【Vue-Router】不跳转的情况下为路由(当前页面)添加query参数。
复制链接

扫一扫

专栏目录

vue路由传递参数（一）（不跳转页面传递参数）详解

jieweiwujie的博客

09-06

2344

此用法主要适用于单页面中引入一个组件，组件需要根据不同的参数展示不同的数据，不用跳转页面，渲染速度快，达到消耗少，高内聚，低耦合的效果

vue中路由vue-router的使用和生命周期

01-06

Vue Router 是vue.js官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。 vue-router的使用 1.在项目src文件夹下新建名为router的文件夹 2.在router文件夹下新建index.js 编程式 router...

参与评论您还未登录，请先登录后发表或查看评论

解决vue-router中的query动态传参问题

12-29

最近在写项目，在写项目的过程会总发现这样或者那样的问题，比如说vue-router中的query如何传递动态的参数，经过了一些波折才解决了问题，问题描述如下：希望跳转的时候url是这样的：http://localhost:8080/editmovie?id=**** 修改但是呢？上面的只是一个静态的，url永远会是：http://localhost:8080/editmovie?id=111 实际上我需要

vue-router路由参数刷新消失的问题解决方法

08-30

本篇文章主要介绍了vue-router路由参数刷新消失的问题解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Vue-router路由判断页面未登录跳转到登录页面的实例

11-27

如下所示： router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next(); } });

解决vue-router在同一个路由下切换,取不到变化的路由参数问题

12-09

最近用vue写项目的时候碰到一个问题，在同一个页面下跳转，路由地址不变，路由参数有变化，一开始只是在data里取路由的参数，发现根本取不到变化的路由参数。在网上查找了一番后发现可以这样写： watch: { '$route' (to, from) { //这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了 console.log(this.$route.query) } } 以上这篇解决vue-router在同一个路由下切换,取不到变化的路由参数问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

【Vue】Router路由无法跳转问题整理

热门推荐

qq_37485170的博客

02-01

1万+

后来打印发现可能这个封装的方法里面最初this本身就有问题，打印出来是undefined,那怎么整都找不到$router啊，于是最后在这个js文件中引入了router。项目封装axios的全局拦截的时候遇到一个很奇怪的问题，axios.interceptors.request中遇到接口不是200的情况，想跳到首页，方法如下。当然，要是实在是想不到解决办法，我还有个投机取巧的方法，直接用windows本身自带的路径跳转也可以实现了。附上完整的registerAjax.js。然后像下面这样写，就可以实现了。

【Vue】【Router】手动跳转用 this.$router.push() 时 $router 未定义的问题

weixin_30815469的博客

04-10

2026

初入Vue，手写路由跳转时的问题： toXxxRoute: () => { this.$router.push({'path': '/xxx', 'name': 'xxx'}) } 由于使用了箭头函数，this的指向与传统 js 里不同所以报错 TypeError: Cannot read property '$router' of undefined ...

vue router-link传参以及参数的使用实例

01-19

<router to=”{path:’/test’,query:>跳转</router>(id是参数) 使用：this.$route.query.id 2.路径：http://localhost:8081/#/test/1 <router to=”‘/test/’+id”>跳转</router>(id是参数) 路由：使用：this.$...

vue router 传参获取不到的解决方式

12-13

在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params ...

vue路由跳转传递参数的方式总结

01-19

日常业务中，路由跳转的同时传递参数是比较常见的，传参的方式有三种： 1）通过动态路由方式 //路由配置文件中配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id...

vue相同路由跳转强制刷新该路由组件操作

11-19

1.在菜单的路由跳转上绑定一个随机query参数，例如时间戳或者随机数： this.$router.push({ path:"/xxx", query:{ t:Date.now(), }, }); 该操作会触发路由改变，但是组件内的状态没有初始化，因为组件没有被...

Vue 路由间跳转和新开窗口的方式（query、params）

01-21

路由间跳转配置： query 方式参数会在url中显示 this.$router.push({ // query方式 path: /a, query: { projectDetails: val }, params 方式传参数据不会在导航栏中显示,需要配合路由的name属性使用 // ...

vue入门之--路由.docx

03-26

const router = new VueRouter({ routes }) ④挂载 new Vue({ router, render: h => h(App) }).$mount('#app') ⑤根组件的模板里放上 <router></router> ⑥根据按钮跳转时 <router to="/center">...

vue $router和$route的区别详解

01-22

一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。 this.$router.push会往...

vue-router跳转路由 , 参数如何传递和获取

03-08

您可以使用$route对象来获取路由参数。在路由跳转时，您可以使用$route.push()或$route.replace()方法来传递参数。例如，使用$route.push('/user?id=123')来传递id参数，然后在目标组件中使用this.$route.query.id来获取参数值。如果您需要在路由路径中传递参数，可以使用动态路由。例如，定义路由路径为/user/:id，然后在$route.params.id中获取参数值。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交