vue中关于路由的传参和取参的使用

最新推荐文章于 2023-11-21 21:07:24 发布
最新推荐文章于 2023-11-21 21:07:24 发布
阅读量181 收藏
点赞数
分类专栏： vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouchuanlun/article/details/107955501
版权

今天在学习vue框架的时候，犯了一个非常低级的错误，就是配置传参的时候 （空格） :to="{name:‘login’,query:{id:loginid}}“没有加空格，导致页面没有识别，直接把代码带出来了：
首页
=**”{name:‘nav.index’}">**首页 个人中心 资讯 我的
源代码如下：

路由的跳转
所以以后在编写代码的时候，一定要注意代码规范，防止低级错误的出现！
周传伦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE中路由的传参和取参
qq_44173499的博客
03-12 795
具体代码： Markup <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document...
Vue学习笔记十四：路由的传参和取参
qq_45283247的博客
03-08 183
Vue学习笔记十四：路由的传参和取参 Vue版本：2.5.21 Vue-router版本：3.1.6 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
Vue 路由传参及获取
单飞吧的博客
09-07 433
details(id) { this.$router.push('/details?id=' + 123) //?号拼接传参,如果有多个可以用&拼接 ’?id=‘+id+’&name=‘+name this.$router.push({ path: '/details', query: { id: 123}}); //query传参,query要用path来引入, this.$router.push({ name: 'details', params: { id: 123
Vue路由的传参与取参
lql_h的博客
10-12 304
概述 1. 查询参数 配置（传参） :to="{name:'login',query:{id:loginid}}" 获取（取参） this.$route.query.id 2.路由参数 配置（传参） :to="{name:'register',params:{id:registerid} }" 配置路由的规则 { name:'detail',path:'/det...
Vue页面路由参数的传递和获取
月光晒了很凉快的博客
09-17 7437
动态路由参数它隐藏字段信息，相对于来说较安全，同时地址栏中的地址也相对较短它必须是先定义后使用，一般用于根据固定参数，返回对应的数据所用query字符串?id=1通过search字符串的方式来在地址栏中传递数据，相对于来说地址栏会暴露字段信息安全性较低，一般用于搜索相关，它可以不定义就可以直接用props 隐式传递隐式传递，它一般用于敏感数据的传递，可以不用cookie/storage来完成对于页面传参。
vue路由传参 vue路由传参
11-18
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）功能的重要组成部分。在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种...
vue动态路由配置及路由传参的方式
12-10
　这就要用到动态路由跟路由传参了！ 首先我们来了解下router-link这个组件： 　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就...
vue-router 路由传参用法实例分析
10-15
本篇文章将深入探讨 Vue Router 的路由传参方法。 首先，路由传参主要分为两种方式：查询参数和命名参数。 1. **查询参数**： 查询参数是在 URL 查询字符串中传递的，以 `?` 开头，例如 `/list?id=001`。这种方式...
浅谈vue-router 路由传参的方法
08-28
在 vue-router 中，路由传参可以通过 `$route` 对象来实现。`$route` 对象提供了多种方式来获取路由参数，例如 `$route.params`、`$route.query` 等。 ### 1. 使用 `$route.params` 获取路由参数 在 vue-router 中...
详解Vue中一种简易路由传参办法
08-29
本文介绍了一种简易的路由传参方法，即在点击事件中将 item 传递给 `toOther` 函数，然后在 `toOther` 函数中使用 query 传递参数。例如，`toOther(to, run) { location.hash = to + '?' + 'book_key=' + run.key; }...
Vue 路由传参和获取参数的方法
zzx262625的博客
10-25 1779
在使用 Vue 进行开发时，路由传参是非常常见且重要的功能。通过路由传参，我们可以在不同的页面之间传递数据，以实现更灵活的交互和功能。Vue 提供了多种方法来实现路由传参和获取参数的操作。
vue路由传参以及组件取参
yonghengls的博客
07-09 96
1、通过页面路由跳转，页面访问格式为http://XX/XX/details/001 路由跳转代码 this.$router.push('/details/001’) // 带有路径的对象 this.$router.push({path: '/details/001'}) // 命名路由，路由配置时，需要 name 字段 this.$router.push({ name: 'details', params: { id: '001' } }) 页面访问url后缀格式： /details
路由的传参和取参
weixin_44415461的博客
08-04 734
查询参 配置（传参） :to="{name:‘login’,query:{id:loginid}}" 获取（取参） this.$route.query.id 路由参数 配置（传参） :to="{name:‘register’,params:{id:registerid} }" 配置路由的规则 { name:‘detail’,path:’/detail/:id’}...
vue路由传参方式的几种方式与获取参数详解
热门推荐
weixin_47013351的博客
04-17 2万+
一、声明式传参 1.params传参(显示参数) 在url中会显示出传参的值，刷新页面不会失去拿到的参数，使用该方式传值的时候，需要子路由提前配置好参数： //路由参数配置 const router = new VueRouter({ routes: [{ path: '/about/:id', component: User }] }) //声明式导航使用 <router-link to="/about/12">跳转</router-link>
【Vue】路由传参与取值的两种方式
Lik1024
07-03 3568
1、query 方式 传参： this.$router.push({ path: this.componentName, query: { dataList: [...] } }); 取值： this.$route.query.dataList; 2、params 方式 传参： this.$router.push({ pa...
vue-router的传参与取参汇总
weixin_43475207的博客
03-27 1655
vue-router的传参与取参汇总一. params方法1.通过传参与params取参2.通过编程式路由传参与params取参二.query方法1.通过传参与query取参2.通过编程时路由传参与query取参 一. params方法 1.通过传参与params取参 通过path中设置：id，目的是以后会往/foo后面添加一个id值，如/foo/id 例： const router = ne...
vue中路由传值和取值的方法
3木子熙H
08-05 3787
这里你需要注意：router传值，而route用于取值 1、路由传值 this.$router.push() （1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL （2）当点击 <router-link> 时，这个方法会在内部调用，即点击 <router-link :to="..."> 等同于调用 router.push(...) a) 声明式：<rou
vue路由传参的详解1.命名路由的传参和取出2.query传参和取出3.meta传参和取出4.其他方式5.注意点 代码和注释
小墨蛇的博客
11-21 535
vue路由传参的详解1.命名路由的传参和取出2.query传参和取出3.meta传参和取出4.其他方式5.注意点 代码和注释
vue路由取参注意事项
weixin_56663184的博客
04-13 153
wel/sceneApp/evaluationEntry?itemid=1511978783972192258&managerDept=false 以上述URL地址为例，一般我们在父页面传递的参数managerDept=false，这里父组件参数managerDept值为false，此处为Boolean类型，假设在子组件中要用上述URL中的参数，看代码 data(){ managerDept:false } created(){ this.managerDept = th..
vue 路由传参取参
最新发布
07-04
Vue.js 路由参数传递和获取是一个常见的需求，在 Vue Router 中，你可以使用动态路由（也称为参数化的路径）来传递数据。动态路由通常使用冒号 `:` 来定义参数的部分，例如： ```javascript // 定义动态路由 const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周传伦

您的微薄的鼓励，是我前进的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值