常见路由跳转的几种方式

这篇具有很好参考价值的文章主要介绍了常见路由跳转的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

常见的路由跳转有以下四种:

1. <router-link to="跳转路径"> 

/* 不带参数 */
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
// 更建议用name
// router-link链接中,带'/' 表示从根路径开始,不带 表示从当前路由开始


/* 带参 */
// 1. params传参
<router-link :to="{name:'home', params: {id:1}}">
// 路由配置 用 path: "/home/:id" 或者 path: "/home:id"
// 配置path,刷新页面参数保留;不配置path,刷新页面后 参数会消失

// html 取参 $router.params.id
// script 取参 this.$router.params.id


// 2 query传参
<router-link :to="{name:'home', query: {id:1}}">
// 路由可不配置

// html 取参 $router.query.id
// script 取参 this.$router.query.id

也可,如

常见路由跳转的几种方式,vue学习,前端,javascript,开发语言

2. this.$router.push() 跳转到指定的url,并在history中添加记录(即,点击回退,会退回上一个页面)

/* 不传参 或 query传参 */
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

this.$router.push({name:'home', query: {id:'1'}})
this.$router.push({path:'/home', query: {id:'1'}})



/* params传参 */
this.$router.push({name:'home', params: {id:'1'}})
this.$router.push({path:'/home', params: {id:'1'}})
//注: params传参只能用name
//配置path,刷新页面参数保留;不配置path,刷新参数消失


/* query和params的区别 */
// query类似于 get 请求,跳转后页面url会拼接参数,如?id=1。-->适用于 非重要的参数
// params 类似于post,不拼接参数,刷新页面后参数消失。--->适用于 安全性较高的参数,如密码

html中,如:

常见路由跳转的几种方式,vue学习,前端,javascript,开发语言

3. this.$router.replace() 跳转到指定的url, 但不会在history记录(即,点击回退 退回到上上个页)

4. this.$router.go(n) 向前或向后跳转 n 个页面,n可正可负。 

使用后三种 需要在<script setup>中 导入

import router from '@/router';

参考:路由之间跳转的方式_路由跳转几种方式_时间管理maste的博客-CSDN博客

路由跳转几种方法_路由跳转的方式有哪几种_丶凡人的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-694329.html

到了这里,关于常见路由跳转的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp页面跳转的几种方式 以及举例(2)

    又来混时长 嫖流量卷了 保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack 可以返回到原页面。   关闭当前页面,跳转到应用内的某个页面。   关闭所有页面,打开到应用内的某个页面。 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 关闭当前页面,返回上一

    2024年01月19日
    浏览(47)
  • Vue路由跳转的五种方式

    路由跳转有两种形式:声明式导航、编程式导航 1. router-link 声明式 prop= :to=“…” 相当与 router.push(…) router-link中链接如果是’ / \\\'开始,就是从根路由开始 如果开始不带 ’ / \\\',则是从当前路由开始 例子 2. this.$router.push() 可追溯 编程式 router.push(…)//该方法的参数可以是一个

    2024年02月05日
    浏览(41)
  • 【vue3】vue3路由跳转的方式

    如 : 有无this都行 $router.push(\\\'/plantduce\\\') this.$router.push(\\\'/plantduce\\\') vue3 || vue2 路由参考 useRouter 与 useRoute 都可以。

    2024年02月06日
    浏览(42)
  • JS 实现页面跳转的几种方法

    我总结了这五种方法: 第一种:使用JS跳转页面 (1)跳转带参 (2)跳转无参 第二种:返回上一次预览界面 HTML页面嵌套 第三种:button按钮添加事件跳转   第四种:在新窗口打开 第五种:通过meta设置跳转页面 这里还有一个页面传值 第一个页面 第二个页面

    2024年02月01日
    浏览(45)
  • 微信小程序和H5之间相互跳转的几种情况

    直接通过web-view内嵌的方式,有且只有这一种方式。 H5内嵌在小程序的web-view中,想要打开小程序自身的页面,可通过 wx.miniProgram.navigateTo 方法,参考链接:web-view | 微信开放文档 (qq.com) H5在非小程序环境中,微信浏览器或者手机自带浏览器打开时,想要跳转到小程序,可通过

    2024年02月11日
    浏览(49)
  • vue获取当前路由的几种方式

    第一种 第二种 通过getCurrentInstance 获取当前的组件实例,从而通过其获取router,然后胡德当前路由地址 第三种 第四种 第五种

    2024年02月13日
    浏览(66)
  • 【Vue3】路由传参的几种方式

    路由导航有两种方式,分别是:声明式导航 和 编程式导航 参数分为query参数和params参数两种 1.传参 在路由路径后直接拼接 ?参数名:参数值 ,多组参数间使用 分隔。 如果参数值为变量,需要使用模版字符串。 2.接收与使用 1.传参 to不再传递字符,而是传一个对象,由于参数

    2024年02月21日
    浏览(52)
  • Vue中监听路由参数变化的几种方式

    目录 一. 路由监听方式: 通过 watch 进行监听 1. 监听路由从哪儿来到哪儿去 2. 监听路由变化获取新老路由信息 3.  监听路由变化触发方法 4. 监听路由的 path 变化 5. 监听路由的 path 变化, 使用handler函数 6. 监听路由的 path 变化,触发methods里的方法  二. 路由监听方式:key是用

    2024年02月14日
    浏览(69)
  • uniapp路由跳转的六种方式

    uniapp官方文档详解: 一、uni.navigateTo保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 注意: 页面跳转路径有层级限制,不能无限制跳转新页面 跳转到 tabBar 页面只能使用 switchTab 跳转 二、uni.redirectTo关闭当前页面,跳转到应用内的某个页面。

    2024年02月11日
    浏览(45)
  • 微信小程序中路由跳转的方式有哪些?区别?

    微信小程序拥有 web 网页和 Application 共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能 在微信小程序中,每个页面可以看成是一个 pageModel , pageModel 全部以栈的形式进行管理 常见的微信小程序页面跳转方式有如下: wx.navig

    2024年02月01日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包