详解vue 路由跳转四种方式 (带参数)[转载]

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

详解vue 路由跳转四种方式 (带参数)[转载]

 

1. router-link

1. 不带参数

 <router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。

2.带参数

<router-link :to="{name:'home', params: {id:1}}"> 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id

2. this.$router.push() (函数里面调用)

1. 不带参数

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

2. query传参

 this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id

3. params传参

 this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
  
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id

4. query和params区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。

3. this.$router.replace()

(用法同上,push)

4. this.$router.go(n) ()

this.$router.go(n)

向前或者向后跳转n个页面,n可为正整数或负整数。

为了保存收藏,转载到自己的文章中, 原创文章大佬 : http://t.csdn.cn/QSVJF文章来源地址https://www.toymoban.com/news/detail-436675.html

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

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

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

相关文章

  • 【vue3】vue3路由跳转的方式

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

    2024年02月06日
    浏览(39)
  • 【vue2第十七章】VueRouter 编程式导航跳转传参(点击按钮跳转路由和如何传递参数)

    如何在js进行跳转路由 在一些需求中,我们需要不用点击a标签或者router-link,但是也要实现路由跳转,比如登陆,点击按钮搜索跳转。那么这种情况如何进行跳转呢? 直接再按钮绑定的方法中写 this.$router.push(\\\'路由路径\\\') 即可。 代码示范 this.$router.push(\\\"/跳转路径\\\") 或者 this

    2024年02月09日
    浏览(41)
  • 微信小程序 - 实时监听路由发生变化,当页面跳转发生变化时执行一段代码或函数,可获取目标页面的路径 URL 、路由参数、跳转方式、该页面的配置等(支持 “全局“ 和 “局部“ 两种写法)

    有时候,我们需要实时监听页面的跳转,并且拿到路由地址及参数。 实现了 在微信小程序开发中,每次切换页面时都触发一个函数,当路由发生变化后执行一段代码, 简单来说,相当于一个 “路由监听器”,当页面跳转时立即触发,然后拿到路由的 URL 和携带的参数,进行

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

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

    2024年02月14日
    浏览(66)
  • uniapp 路由跳转方式

    2024年02月14日
    浏览(35)
  • 微信小程序路由以及跳转页面传递参数

    路由 在app.json的pages里面写 \\\"pages/页面/页面\\\" 直接保存pages直接生成非常方便  跳转页面 wx.navigateTo() 保留当前页面,跳转到应用内的某个非tabBar页面。 text bindtap=\\\"daka\\\"点击/text 会保留返回箭头 底部导航跳转在app.json写入即可 传参以及接收参数 1、本地存储 使用方法:和js差不

    2024年02月11日
    浏览(53)
  • 【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置

    利用 useNavigate 封装一个 withRouter(hoc/with_router.js) 添加到hoc/index.js文件中 利用withRouter,拦截Home组件,实现手动跳转路由 路由参数传递包括:1.动态路由传参;2.查询字符串传参 改造withRouter,通过 useParams() 和 useSearchParams() 来接收两种参数传递: 在界面中,通过params来接收

    2024年02月14日
    浏览(50)
  • 常见路由跳转的几种方式

    常见的路由跳转有以下四种: 1. router-link to=\\\"跳转路径\\\"  也可,如 2. this.$router.push() 跳转到指定的url,并在history中添加记录(即,点击回退,会退回上一个页面) 。 html中,如: 3. this.$router.replace() 跳转到指定的url, 但不会在history记录(即,点击回退 退回到上上个页) 4

    2024年02月10日
    浏览(40)
  • Postman Post请求四种参数传递方式与Content-Type对应关系

    Postman post 请求四种数据传递类型代表的Content-Type类型: 1、form-data : 对应的Content-Type:multipart/form-data;boundary= 表示文件上传; 2、x-www-form-urlencoded:对应的Content-Type:application/x-www-form-urlencoded 表示表单提交; 3、raw:对应的Content-Type分为五类: 4、binary:对应的Content-Type:ap

    2024年02月05日
    浏览(53)
  • 微信小程序中路由跳转方式

    常见的微信小程序页面跳转方式有如下: wx.switchTab(Object) : 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 (面全部出栈,只留下新的 Tab 页面) wx.reLaunch(Object) : 关闭所有页面,打开到应用内的某个页面 (页面全部出栈,只留下新的页面) wx.redirectTo(Object) : 关闭当前

    2024年04月29日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包