vue中页面(路由)跳转及传值的几种方式 router-link + query + params

简介: vue中页面(路由)跳转及传值的几种方式 router-link + query + params

前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。

vue中页面(路由)跳转及传值的几种方式

知道query 和 params 是什么

参考文案:https://www.php.cn/js-tutorial-382859.html

跳转的几种方式与传值

1、router-link

1.1 根据路由路径(无参数与有参数)

<router-link to = "/page">跳转到page页面</router-link>
<router-link :to = "{ path: '/page', query: { id: '001' } }">跳转到page页面</router-link>

1.2 根据路由名称 (无参数和有参数的区别)

<router-link :to = "{ name: 'page', query: { id: '110' } }">跳转到page页面</router-link>
<router-link :to = "{ name: 'page', params: { id: '110' } }">跳转到page页面</router-link>

使用路由与路径·的注意事项:

  1. :to=“” 可以实现绑定动态的 路由 和 参数
  2. 注意:router-link中链接如果是‘/‘开始就是从根路由开始,如果开始不带‘/’,则从当前路由开始。
  3. 使用params时 是不能通过path跳转的
  • 由于动态路由也是传递params的(/page/123?id=123),所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。
  • 所以,使用params的时候,只能用name来指定页面。

router-link 的使用/功能

实现路由切换,就是小模块的路由切换,这个时候的router就相当于a标签

参考文案:https://blog.csdn.net/qq_44163269/article/details/105186956

参考文案2(偏属性):https://www.cnblogs.com/fqh123/p/11758710.html

2、this.$router.push()

1.1 不带参数跳转

// 不带参数,直接跳转页面
this.$router.push('/orderList')
this.$router.push({ path: '/orderList' })
this.$router.push({ name: 'orderList' })

1.2 带参数跳转

<button @click=‘hChange’>点击按钮跳转页面</button>
function hChange () {
    this.$router.push({ path: '/page', query: { id: '001' } })  // 根据路由路径 + query 的方式跳转传参
    this.$router.push({ name: 'page', query: { id: '001' } })   // 根据路由名称 + query 的方式跳转传参
    this.$router.push({ name: 'page', params: { id: '001' } })  // 根据路由名称 + params 的方式跳转传参
}

如何接收参数呢?

// 在html中接收参数
$route.query.id
$route.params.id
// 在script中接收参数
this.$route.query.id
this.$route.params.id

注意:

params 和 query 传参的区别:

  1. params传参时,参数不会出现在url路径上面,但是刷新页面时param里面的数据会消失
  2. query传参时,参数出现在url路径上面,刷新页面时query里面的数据不变

区别及传参接参全过程图示:

params传参 和 query传参 都是在什么时候使用?

  1. params传参,路由路径后面需要写/:参数名/参数名,传过来的参数就保存在这里,不写参数名的时候,用户一刷新传过来的参数就没有了
  2. query传参,就不需要在路由路径后面再写任何东西
  3. params传参,参数保存在了路由路径后面提前写的对应参数名里。query传参,会自动在路由路径后面形成传的参数名及对应的值。可以这样说,params传的是值,而query是把参数名和值一起传过去了。因为它的路由路径后面没有参数名
  4. 所以在传多个参数的时候,使用query比较好,如果使用params,还得在路由路径后面创建多个参数名

其他:

  1. 传值的话不仅仅是通过这两种方式,还可以通过LocalStorage,SessionStorage,vux来进行数据传递
  2. 需要注意的是接收参数的时候是route而不是router。两种方式一一对应,名字不能混用。
  3. router-link 是在通过标签做跳转,而this.$router.push是在script里面做跳转

代码:

// 通过标签 <router-link>
<router-link to = 'A'>跳转到A页面</router-link>
// 通过方法 this.$router.push()
// html
<span @click=“hChange(“id”)”><span>
// script
methods: {
    hChange (val) {
        this.$router.push ({ name: 'page', params: { id: val } })
    }
}

目录
相关文章
|
4月前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
232 2
|
4天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
30 8
|
3月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
79 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
3月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
37 1
|
2月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
153 0
|
3月前
|
JavaScript 前端开发 安全
如何在 Vue 页面中禁止选择、右键、复制及 F12 开发者工具
【10月更文挑战第3天】 在前端开发中,保护页面内容不被随意复制或查看是一个常见需求。本文介绍了如何在 Vue 应用中实现禁止文本选择、右键菜单、复制操作以及 F12 开发者工具的方法。通过结合 CSS 和 JavaScript 事件监听,我们可以增加用户查看和复制内容的难度,尽管无法完全阻止高级用户。适当的防护措施可以为内容提供一层额外的保护,帮助开发者提升页面安全性。
604 0
|
4月前
|
JSON JavaScript 数据格式
Vue路由params、query参数丢失解决
该文章介绍了在Vue中使用`params`和`query`进行路由参数传递时,如何通过`sessionStorage`或`localStorage`解决参数丢失的问题。
143 2
|
3月前
|
JavaScript
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
517 0
|
3月前
|
JavaScript
vue尚品汇商城项目-day03【18.合并params和query参数(Header组件+TypeNav组件)】
vue尚品汇商城项目-day03【18.合并params和query参数(Header组件+TypeNav组件)】
31 0
|
3月前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
53 0