vue3页面跳转的两种方式
目录
  • 1、标签内 router-link跳转
  • 2、编程式路由导航

vue3的页面跳转有两种方式，第一种是标签内跳转，第二种是编程式路由导航

1、
<router-link to='/testDemo'>
 <button>点击跳转1</button>
</router-link>
2、router.push("/testDemo");

1、标签内 router-link跳转

通常用于点击 查看 按钮，跳转到其他页面

// 1、不带参数直接跳转
<router-link to='/testDemo'>
 <button>点击跳转1</button>
</router-link>
<router-link :to="{name:'testDemo'}">
<router-link :to="{path:'/testDemo'}"> //name,path都行, 建议用name
// 2、带参数跳转
// （1）query参数
<router-link :to="{path:'testDemo',query:{id:001}}">
 <button>点击跳转2</button>
</router-link>
// 类似类似get,url后面会显示参数
// 路由可不配置
// （2）params参数
<router-link :to="{name:'testDemo',params:{setid:002}}">
 <button>点击跳转3</button>
</router-link>
// 类似post
// 路由配置 path: "/home/:id" 或者 path: "/home:id"

2、编程式路由导航

import { useRouter } from "vue-router";
const router = useRouter();
//直接跳转
const handleChange = () => {
  router.push("/testDemo");
};
 //带参数跳转
router.push({path:'/testDemo',query:{id:003}});
router.push({name:'testDemo',params:{id:004}});

到此这篇关于vue3页面跳转的文章就介绍到这了,更多相关vue3页面跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3如何根据搜索框内容跳转至本页面指定位置

    目录 需求 思路 实现过程 补充内容 总结 需求 需求:根据搜索框内容跳转至本页面指定位置 搜索框是我们在开发各类项目中出现率很高的一个"组件",在element-plus中名为"自动补全输入框",即我们可以根据输入的内容去检索列表或者表格或者其他本页面出现的元素,那我们应该如何去实现这个行为呢? 思路 整体过程是这样的: 点击输入框的内容,页面跳转至指定的内容位置 实现过程 ①首先我们必须要在页面中引入自动补全输入框组件 template部分 <el-aut

  • vue3配置router路由并实现页面跳转功能

    目录 1.安装vue-router 2.根目录下新建router文件夹,下面新建index.js文件和routes.js 2.1文件中引入vue方法.配置页面具体路径 3.main.js文件中引入路由 4.APP.vue里声明路由的占位符<router-view></router-view> 5.测试 6.文件代码 1.安装vue-router 用vue3需要安装版本4.0以上的vue-router,安装命令: npm install vue-router@next --save

  • Android Intent实现页面跳转的两种方法

    Android Intent实现页面跳转的两种方法

    本文实例为大家分享了Intent实现页面跳转的两种的方法,供大家参考,具体内容如下 下图中两个不同的方法就是两种页面之间跳转的情况 1).跳转不返回数据 2).跳转返回数据 实例: 第一种启动方式(跳转不返回数据) 第二种启动方式(跳转返回数据) 先看第一种: 点击第一种启动方式按钮会出现右边的图,然后再点击Button按钮返回左边的界面,TextView中的内容没变. 再看第二种启动方式 不同的是,点击Button按钮返回左边的界面,TextView中的内容变成了你好. 下面是所有代码 And

  • Javascript实现页面跳转的几种方式分享

    第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript">window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript">alert(&q

  • JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）

    随着移动互联网的不断普及,企业的网络宣传不仅只局限在PC端,还要在移动端发展.我们在自己的网站做了WAP手机完整之后,如果有用户通过手机访问我们的企业顶级域名网站,就要判断跳转到专为的WAP网站,下面小编通过两种方式介绍根据手机浏览器类型跳转WAP手机网站,具体内容如下. 第一种方式:直接JS脚本 <script type="text/javascript"> try { var urlhash = window.location.hash; if (!urlhash.ma

  • JavaScript实现页面跳转的几种常用方式

    本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

  • JS实现把一个页面层数据传递到另一个页面的两种方式

    由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递cookie页面的html,此处命名为a.html 请输入用户名和密码: <input id="userName" type="text" /> <input id="passwords" type="password&q

  • mpvue 页面预加载新增preLoad生命周期的两种方式

    存在的必要性:mpvue开发微信小程序,在页面跳转到新页面的过程中会有200ms左右的延迟,这个200ms如果用来请求新页面的接口,那么跳转到新页面或许已经渲染好了页面. 就是两种方式: 1.新页面跳转之前,就请求新页面数据. 2.跳转到新页面后,再请求数据,可能还会有一个loading的状态. 第二种方式是正常的的页面跳转,不say了. 这里讲解的都是第一种方式: 从上面结构图可以看出系统跳转的延时时间可以用来请求新数据,大大提高了用户体验性. 方案是有了,该怎么实现呢. 我们知道mpvue的

  • 微信小程序路由跳转两种方式示例解析

    目录 官方文档 路由跳转的两种形式 标签形式 js形式 快速总结 小程序路由跳转 1.1 wx.switchTab(Object object) 1.2 wx.reLaunch(Object object) 1.3 wx.redirectTo(Object object) 1.4 wx.navigateTo(Object object) 1.5 wx.redirectTo与wx.navigateTo的区别 1.6 wx.navigateBack(Object object) 官方文档 https

  • Vue3使用icon的两种方式实例

    Vue3使用icon的两种方式实例

    目录 1. 使用svg 2. 使用fontAwesome 3  来源 4 总结 技术栈和版本 Vite2 + Vue3 + fontAwesome5 Vue3 中使用Icon的方式,fontAwesome 简单好用,但有时候缺少想要的icon.采用svg的方式,想要什么,直接下载,然后使用,种类更加的全,基本上没有不符合需求的icon,但是没有fontAwesome 相对的容易轻松,每次都要下载对应的图片. 1. 使用svg a 下载需要使用的SVG图片,保存至 src/icons文件夹 b 安

  • vue3中的对象时为proxy对象如何获取值(两种方式)

    目录 第一种获取target值的方式: 第二种获取target值 PS:vue3中获取proxy包裹的数据 前言 一.具体问题 二.解决办法 使用vue3.0时,因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象,Proxy对象里边的[[Target]]才是真实的对象. 第一种获取target值的方式: 通过vue中的响应式对象可使用 toRaw() 方法获取原始对象 //第一种获取target值的方式,通过vue中的响应式对象可使用toRaw()

  • vue-router 源码实现前端路由的两种方式

    在学习 vue-router 的代码之前,先来简单了解一下前端路由. 前端路由主要有两种实现方法: Hash 路由 History 路由 先来看看这两种方法的实现原理. 接着我们将用它们来简单实现一个自己的前端路由. 前端路由 Hash 路由 url 的 hash 是以 # 开头,原本是用来作为锚点,从而定位到页面的特定区域.当 hash 改变时,页面不会因此刷新,浏览器也不会向服务器发送请求. http://www.xxx.com/#/home 同时, hash 改变时,并会触发相应的 has

随机推荐

其他