首页 > 编程语言 >编程式导航——两种路由跳转方式

编程式导航——两种路由跳转方式

时间:2023-10-11 21:45:47浏览次数:43  
标签:传参 编程 参数 跳转 push router 路由

编程式导航:通过 JS 的方式实现路由跳转

如何实现点击按钮跳转?

 

一、不传参:

1. 通过 path 路径跳转(简易方便)

① 简写:

   按钮的点击事件中写   this.$router.push ( ' /路由路径 ' )       比如:this.$router.push ( ' /search ' ) 

② 完整写法:

this.$router.push ({

      path : ' /路由路径 '

})

2. name 命名路由的方式跳转(适合 path 路径长的场景)

第①步  给路由起名字:

const router = new VueRouter({   routes: [     { name : ' haha ' ,  path : ' /find ' ,  component : Find },   ], })

第②步  按钮的点击事件中写:

this.$router.push ({

      name : ' 路由名 '   (比如  name : ' haha ')

})

 

二、 传参:

1. path 路径跳转传参  之  查询参数传参(如果其他页面要接收传过来的参数,可以用 $route.query.参数名)

① this.$router.push (' /路径 ? 参数名1 = 参数值1 & 参数名2 = 参数值2 ')

② 

this.$router.push ({

      path : ' /路径 ' ,

      query : {

            参数名1 : 参数值1 ,

            参数名2 : 参数值2 

      }

})

 

2. path 路径跳转传参  之  动态路由传参(如果其他页面要接收传过来的参数,可以用 $route.params.参数名)

      注:动态路由传参需要配路由

① this.$router.push ( ' /路径/参数值 ' )

② 

this.$router.push ({

      path : ' /路径/参数值'

})

 

3. name 命名路由跳转传参   之   查询参数传参(如果其他页面要接收传过来的参数,可以用 $route.query.参数名)

this.$router.push ({

      name : ' 路由名 ' ,

      query : {

            参数名1 : 参数值1 ,

            参数名2 : 参数值2 

      }

})

 

4. name 命名路由跳转传参   之   动态路由传参(如果其他页面要接收传过来的参数,可以用 $route.params.参数名)

this.$router.push ({

      name : ' 路由名 ' ,

      params : {

            参数名 : 参数值

      }

})

 

标签:传参,编程,参数,跳转,push,router,路由
From: https://www.cnblogs.com/gagaya2/p/17758260.html

相关文章

  • 畅想未来编程语言
    语言前端后端逻辑游戏引擎C++pyQt转pyC++主流的都用(UE,Godot,Source2,Unity...)C#.NETGodotJavaKotlin安卓原生SpringBoot案例:MinecraftHTML(CSS)Vue(Tauri)JSdartflutter跨平台PythonpyTorch,fastAPIRustTauri跨平台Bevy跨......
  • vue项目打包,解决静态资源无法加载和路由加载无效(404)问题
    打包后的项目静态资源无法使用,导致页面空白静态资源无法使用,那就说明项目打包后,图片和其他静态资源文件相对路径不对,此时找到config里面的index.js,在build模块下加入assetsPublicPath:'./', 如下图所示,    在History模式下配合使用nginx运行打包后的项目当刷新当前路......
  • 网络编程
    1、程序中每个程序都有端⼝号80端⼝,⽹络端⼝ mysql默认3306oracle默认1521Tomcat默认80802、模拟往服务器上传⽂件,读取客户端要上传的⽂件,保存到服务器上的硬盘,服务器给客户端发个消息,"上传成功"。明确数据源:客户端上传的⽂件客户端的硬盘上的⽂......
  • 【OpenJudge】NOI / 1.5编程基础之循环控制
    25:求特殊自然数总时间限制: 1000ms 内存限制: 65536kB描述一个十进制自然数,它的七进制与九进制表示都是三位数,且七进制与九进制的三位数码表示顺序正好相反。编程求此自然数,并输出显示。输入无。输出三行:第一行是此自然数的十进制表示;第二行是此自然数的七进制表示;第三......
  • Vue 路由——重定向
    问题描述:网页打开,url默认是/路径,未匹配到组件时,会出现空白解决:重定向→匹配path后,强制跳转path路径 语法:{path:匹配路径, redirect:重定向到的路径}constrouter=newVueRouter({ routes:[  {path: '/', redirect:'/find'}, ......
  • 无涯教程-ASP.NET Core - 属性路由
    在本章中,无涯教程将学习另一种路由方法,即基于属性的路由,通过基于属性的路由,可以在控制器类和这些类内部的方法上使用C#属性,这些属性具有告诉ASP.NETCore何时调用特定控制器的元数据。它是基于约定的路由的替代方法。按照出现的顺序,注册的顺序对路由进行判断,但是映射多个路由是......
  • RationalDMIS2023编程学习2023
    1.编程流程简介编程(1)研读图纸----配置测针方案,确定装夹方案,规划坐标系----------打开自学习-----设定模式,设定逼近回退,设定测头角度,设定坐标系,设定移动轨迹,设定输出报告。(2)打开机器2.自学习模式的开启3.模式选择在编写程序之前先要设定好,点击黑色摇杆图样图标选择模式,模式/手动模......
  • React跨路由组件动画
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:佳岚回顾传统React动画对于普通的React动画,我们大多使用官方推荐的react-transition-group,其提供了四个基本组件Transition、CSSTr......
  • 14.1 Socket 套接字编程入门
    Winsock是Windows操作系统上的套接字API,用于在网络上进行数据通信。套接字通信是一种允许应用程序在计算机网络上进行实时数据交换的技术。通过使用Windows提供的API,应用程序可以创建一个套接字来进行数据通信。这个套接字可以绑定到一个端口,以允许其他应用程序连接它。另外,Winsoc......
  • 编程实现who指令
    实现who命令编写who程序时,需要做两件事:1.从文件(/var/run/utmp)中读取数据结构信息2.以合适的形式将结构中的信息显示出来第一步读取信息从某个文件中读取数据,Linux系统提供了三个系统函数:open()、read()、close()。open打开一个文件open在Linux下的定义以及调用函数所需的头......