路由传参的接受参数和编程式导航

目录

上篇文章中遇到的问题

编程式导航

---

上篇文章中遇到的问题

   根据我的上一个文章，已经可以进行路由传参了

  在上一篇文章中的接受方式都应该看到了这样的接参方式，是不是有亿点不方便呢

   {{ route.query.id }}
   {{ route.query.name }} 
    {{ route.query.age }}

   我的参数多了之后，就不能一个一个接受了，用没用什么方法可以省略前面的 route.query呢

看到这里有人可能就想到了---结构赋值

  可以在script中进行解构

let {id,name,age}=route.query

在 模板中 可以直接渲染 

   {{ id }}
   {{ name }} 
    {{age }}

但是出问题了，数据不能实时更新了，别急，在路由配置加入以下代码 

   {
      path: '/',
      name: 'home',
      component: Mine,
      props:true
    },

let ss=defineProps(['id','name','age'])

 直接在模板进行使用就可以了

编程式导航

 首先定义函数  

   let nav=(path,query)=>{
    router.push({path,query})
   }
   

如果想要用 params可将query改为params 不要忘记对路由的配置

调用这个函数 

 <p @click="nav('/mine',{id:3,name:张三,age:'18'})">跳转</p>