Vue---Vue路由传参(动态路由方式、query方式、params方式)

蔚落 2022-12-01 11:58 309阅读 0赞

动态路由传参

路由配置：

  1. {
  2.   path: '/update/:uid/:name',    //uid参数、name参数
  3.   name: 'Update',
  4.   component: () => import('@/views/update.vue'),
  5.   children : []
  6. };

路由跳转：

  1. this.$router.push('/update/111/xiaoming');    //如果没有添加对应参数，页面出现404，不会到达对应页面

在对应页面中拿到路由参数进行网络请求： 

  1. mounted(){
  2.     let id = this.$route.params.uid;
  3.     let name = this.$route.params.name;
  5.     //进行网络请求...
  6. }

query方式传参

路由配置：

  1. {
  2.   path: '/update',    
  3.   name: 'Update',
  4.   component: () => import('@/views/update.vue'),
  5.   children : []
  6. };

路由跳转(两种方式)：

  1. this.$router.push({
  2.     path : '/update',        //方式1：通过path跳转
  3.     query : {
  4.         uid : 111,
  5.         name : 'xiaoming'
  6.     }
  7. })
  10. this.$router.push({
  11.     name : 'Update',        //方式2：通过name跳转
  12.     query : {
  13.         uid : 111,
  14.         name : 'xiaoming'
  15.     }
  16. })

在对应页面中拿到路由参数进行网络请求：

  1. mounted(){
  2.     let id = this.$route.query.uid;
  3.     let name = this.$route.query.name;
  5.     //进行网络请求...
  6. }

params方式传参

路由配置：

  1. {
  2.   path: '/update',    
  3.   name: 'Update',
  4.   component: () => import('@/views/update.vue'),
  5.   children : []
  6. };

路由跳转(只有一种方式)：

  1. this.$router.push({
  2.     name : 'Update',        //只能通过name跳转
  3.     params : {
  4.         uid : 111,
  5.         name : 'xiaoming'
  6.     }
  7. })

在对应页面中拿到路由参数进行网络请求：

  1. mounted(){
  2.     let id = this.$route.params.uid;
  3.     let name = this.$route.params.name;
  5.     //进行网络请求...
  6. }

发表评论

表情：
评论列表 （有 0 条评论，309人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue路由传参的几种方式

    前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数

    小咪咪小咪咪/ 0 赞/ 568 阅读