首页 > 其他分享 >Vue3.0 页面跳转的几种方式

Vue3.0 页面跳转的几种方式

时间:2023-07-25 15:57:55浏览次数:38  
标签:跳转 Vue3.0 router push home 页面 history

 首先引入

import { useRouter } from "vue-router";

使用router接收useRouter

const router = useRouter();

 

1. router.push

我们最常用的 router.push 方法会将新的路由添加到历史记录中,同时会导航到该路由页面,当用户点击浏览器后退按钮时,则回到之前的 URL。

// 保留当前页记录,页面跳转至 /home 页
router.push("/home");

 

2. router.replace

跟 router.push 很像,唯一的不同它不会向 history 添加新记录

// 不保留当前页记录,页面跳转至 /home 页
router.replace("/home");

 

3. router.go

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步。参数为 0 时会重新加载页面,但会有短暂白屏。

// 回退两个页面
router.go(-2);

 

4.  router.back

在 history 记录中,返回上一页。

 

5.  router.forward

在 history 记录中,前往下一页。

 

标签:跳转,Vue3.0,router,push,home,页面,history
From: https://www.cnblogs.com/php-han/p/17580050.html

相关文章

  • 【补充】页面展示之多重模态框
    【补充】页面展示之多重模态框【前端页面代码展示】{%blockinfo%}<divclass="container-fluid"><divclass="row"><h3>基本信息</h3><divclass="container"><divclass="rowjustify-c......
  • 130-vant案例-07-定义错误页面
    定义错误页面#1.配置路由#2.定义页面组件#3.访问不存在的路由会跳转错误页面1.定义路由index.jsimportNotFoundfrom'../views/NotFound.vue'//错误页面,优先级最低{path:'/:pathMatch(.*)*',///:占位符,后面可以随便写/:aa,/:bb;(.*)*:......
  • 页面滚动收起el-select下拉框
    记录当前页面select下拉框的ref(若是table列表里的则先监听table的滚动事件)<el-selectref="carrerSelect"></el-select>this.$refs.carrerSelect.handleClose()handleClose()方法是git源码//table表格里的selectthat.$refs['carrerSelect'+this.nowRowIndex]......
  • 视网膜New iPad与普通分辨率iPad页面的兼容处理
    一、这是篇经验分享 就算不是果粉也应该知道,iPad2与newiPad的重大区别之一就是显示屏的分辨率。newiPad显示屏被称之为“视网膜显示屏”,其设备分辨比(之前有详细介绍,点击这里查看)是iPad2的两倍。–iPadmini也是普通分辨比。 iPad2与newiPad同时显示一个页面,宽度都是1024像素......
  • 前端拿到后端返回文件流后页面生成excel表格预览(Luckysheet)
    最近项目遇到一个需求,就是本来只需要导出的excel文件,客户要求在前端页面进行预览查看。在查找资料后,决定使用Luckysheet来进行excel文件的预览。1.安装npmiluckyexcel2.html中引入相关js,css文件,可以自己下下来放到本地引入<linkrel='stylesheet'href='https://cdn.......
  • SpringBoot基于Spring Security的HTTP跳转HTTPS
    简单说说之所以采用SpringSecurity来做这件事,一是SpringSecurity可以根据不同的URL来进行判断是否需要跳转(不推荐),二是不需要新建一个TomcatServletWebServerFactoryBean,新建这个Bean可能会导致SpringBoot关于Server的配置失效。三是网上大部分流传的通过实现WebServerFactor......
  • 【Azure Event Hub】Event Hub的Process Data页面无法通过JSON格式预览数据
    问题描述在EventHub的门户页面中,可以通过ProcessData页面查看EventHub中的数据,但是当使用JSON格式预览时(ViewinJSON),却出现错误。消息一: Nodatawasfoundforpreviewfrom'test01'.Makesuretheinputhasrecentlyreceiveddataandthecorrectformatofthosee......
  • vue3.0 外部配置文件一 (导入json文件方式)
    vue3.0外部配置文件,重点是打包后也可以修改配置参数 注:js文件中必须是标准的json格式一、在public中创建static文件夹,在static文件夹中创建config.json  文件 config.json (必须是标准的json格式){"webSocketUrl":"ws://192.168.1.120:5011/chat/","......
  • 国标GB28181视频平台LntonGBS(源码版)国标云服务平台对页面过多导致加载困难的问题解决
    LntonGBS国标视频云服务平台不仅支持无缝、完整接入内网或者公网的国标设备,在输出上,实现全平台、全终端输出。平台可将GB/T28181设备/平台推送的PS流转成ES流,并提供RTSP、RTMP、FLV、HLS、WebRTC等多种格式视频流的分发服务,实现Web浏览器、手机浏览器、微信端、PC客户端等各终端无......
  • 页面关闭时调用后端接口
    产品有一个要求,统计用户浏览H5页面的时长。技术原理是在H5打开时调用接口获取统计id,在H5关闭时调用接口结束统计。前端主要解决的问题就是在什么地方请求后端接口。需要注意的就是PC端和移动端有所不同。{data(){return{statisticId:null......