vue 路由传参

 1、 this.$router.push进行编程式路由跳转

    2、 router-link 进行页面按钮式路由跳转

    3、 this.$route.params获取路由传递参数

    4、this.$route.query获取路由传递参数

    5、 params 和 query 都是传递参数的,params不会在url上面出现,并且params参数是路由的一部分,是一定要存在的 query则是我们通常看到的url后面的跟在?后面的显示参数

方法一 

this.$router.push({
            path:"/路径名字",
            query:{
              id:id
            }
          })
方法二
this.$router.push({
             name:"/路径名字",
             params:{
              id:id
            }
          })
方法三
this.$router.push('.路径名'+id)
 
 
路由。index.js文件
 {
      //方式一 二路由路径
      path: '/路径名',
      //方式三路由路径
      // path: '/路径名:id',
      name: 'Xq',
      component: Xq
    },
 接受传过来的参数
    方法一接收
  this.$route.query.id
 
 <!--  方法二接收  -->
 this.$route.params.id
 
 <!--  方法三接收  -->
 this.$route.params.id
posted @   Jackie-Song  阅读(131)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示