首页 > 其他分享 >路由跳转需要带参

路由跳转需要带参

时间:2023-09-22 09:56:14浏览次数:36  
标签:search route 带参 params 跳转 query 路由

表格数据分页,分页数据刷新数据不丢失

分页时跳转

router.push({
    name: route.name,
    params: { page: currentPage.value },
    query: { search: search.value },
  });

其中route.name代表跳转的路径别名

params代表路由跳转所带的参数,需要在路由中配置

{
        path:'/baseManagement/user/:page?',
        name:'user',
        component:()=> import('@/views/baseManagement/user/index.vue'),
        meta: {
          title: "用户列表",
          showLink: true,
          icon:'ant-design:usergroup-add-outlined',
          roles:['admin','user']
        },
        children:[]
      },

路径后加 :page? 匹配0或多个参数

query代表查询的条件,不需要在路由中配置

http://localhost:8099/#/baseManagement/admin/2?search=%E6%B8%B8%E5%AE%A2

以 ?search=' ' 的形式

拿到l路由中参数的方式

import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

//拿到params
const params = route.params.page
//拿到query中的参数
const query = route.query.search

标签:search,route,带参,params,跳转,query,路由
From: https://www.cnblogs.com/sxliu414/p/17721618.html

相关文章

  • 解决keil有定义却无法跳转的情况
    现象有#include,gotodefine出现以下情况:多个完全一样的Name。原因本质是多个定义域内#include,编译器无法确定跳转到哪个作用域。问题所在在函数内使用#includevoid_test(void){#include"hal_uart.h"#include"string.h"解决方法将函数内的#include移......
  • 【HarmonyOS】解决API6 WebView跳转外部浏览器问题、本地模拟器启动黑屏
    ​【问题描述1】HarmonyOSAPI6Java开发中使用WebView组件,如果网页中有跳转链接,点击会跳转到手机系统浏览器。 【解决方案】解决这个问题的方法就是给WebView这种自定义的WebAgent对象。具体代码如下:WebConfigwebConfig=this.webView.getWebConfig();this.webView.setWe......
  • 页面切换到后台,再切回时跳转页面
    document.addEventListener('visibilitychange',function(){letpageVisibility=document.visibilityState;//页面变为不可见时触发if(pageVisibility=='hidden'){console.log("离开时间点:"+newDat......
  • 从零开始学习Vue3路由,提升你的前端开发技能
    Vue3是当前最流行的前端框架之一,它提供了许多方便的功能和工具,其中路由(Router)就是其中之一。本文将介绍如何在Vue3中使用路由。安装和使用VueRouter首先,我们需要安装VueRouter。在终端中输入以下命令:npminstallvue-router@next--save接下来,我们需要创建一个路由实例。在......
  • 14-2 OSPF默认路由引入实验
    实验一会配置OSPF下发默认路由,一般在出口设备配置下发默认路由,出口连接运营商,通过下发默认路由将数据引导至出口设备,再转交给运营商拓扑AR2模拟运营商配置PC1配置LSW1配置<Huawei>sys[Huawei]sysLSW1[LSW1]vlanbatch1020[LSW1]integi0/0/2[LSW1-GigabitEth......
  • 用于异构无线传感器网络的多聚合器多链路由协议(Matlab代码实现)
     ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • OSPF路由引入
    路由引入原因由于不同路由协议之间的路由算法、机制、开销等不同,不同的路由协议之间无法直接分享彼此的路由;此时就需要通过路由引入技术将某个路由协议的路由引入到另一个路由协议中也可以相同路由协议之间引入RIP与OSPF引入位置在ASBR路由器执行引入指令OSPF引入RIP[R8]ospf......
  • 路由器和交换机
    交换机与路由器的特点:交换机(Switch):用于在局域网中传输数据帧基于MAC地址进行转发和过滤工作在数据链路层(第二层)具有多个端口,可以连接多台计算机或其他网络设备支持全双工通信,提供高速的内部数据传输路由器(Router):用于在不同网络之间转发数据包根据IP地址进行转发和路由选择工作在网......
  • vue_vueRouter同组件跳转失败
    目录场景再现资料查询解决场景再现现有一个Article页面,通过/article/:id来匹配不同的文章页面,当我需要实现跳转到上一篇或下一篇时,即从/article/:id跳转另一个/article/:id时,发现浏览器中只有地址变化了,但是页面的很多组件,包括文章内容都没有刷新,资料查询这......
  • 跳转到应用市场下载
    ps:自用的,在此简单记录 //判断应用市场judeBrand(){constuserAgent=navigator.userAgent.toLowerCase()constisIphone=userAgent.match(/(iphone|ipad|ipod)/i);constisHuawei=userAgent.match(/huawei/i);constisHonor=userAgent.match(/honor/i......