Vue 路由传参跳转

路由传参跳转

  在vue的项目中会用到页面之间进行转换，并且需要路由传参的情况。路由传参跳转具体分为以下三种：

1.使用params

 params传参配置的是name,在路由配置中必须设置参数，传参刷新失效
跳转页面：

    Isend(){
      this.$router.push({
      name: 'order-tip',
      params:{
        ownername:'1'
      }
      })
    },

跳转后页面，接受数据，在这里使用了生命周期钩子函数，注意此处为$route：
($router:路由操作对象，只写对象； $route:路由信息对象，只读对象）

export default {
   data(){
      return{
         ownername:''
      }
    },
     created(){
         this.getRouteData()
     },
     methods:{
         getRouteData(){
         this.ownername=this.$route.params.ownername
          console.log('ownername',this.ownername)
        }
      }
}

跳转后可以在页面看到出现值，但刷新后消失

2.使用query

  query传参配置的是path(name也可以）,在路由配置中不需要设置参数，但传递的参数会显示在地址栏中，并且会保存传递过来的值，刷新不变。
跳转页面可以使用path或name：

    Isend(){
      this.$router.push({
      path: '/order-tip',
      query:{
        ownername:'1'
      }
      })
    }

跳转后页面，接受数据，接受参数基本上一致：

export default {
   data(){
      return{
         ownername:''
      }
    },
     created(){
         this.getRouteData()
     },
     methods:{
         getRouteData(){
         this.ownername=this.$route.query.ownername
          console.log('ownername',this.ownername)
        }
      }
}

跳转后可以在页面看到出现值，地址栏中有参数，并且刷新后值仍存在

3.修改路由配置，添加参数

   {
   path:'/order-tip/:ownername',
    name:'order-tip' ,
    meta:{
      hideInMenu:true
    },
    component: ()=>import("@/view/canteen/current-tip/order-tip.vue")

直接在路径后传递值1：

    Isend(){
      this.$router.push({
      path: '/order-tip/1',
      })
    }

跳转后页面，接受数据：

this.$route.params.ownername

结果：

跳转后可以在页面看到出现值，刷新后仍存在