uniapp路由如何实现带参数的跳转

uni-app路由传参-基础传参

uni-app路由提供了非常便捷的参数传递方式，只需要在跳转的时候传递一个json对象的参数就可以了，接收参数的页面可以通过this.$route.params来获取参数，下面是一个例子：

//跳转时传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=张三'
})

//接收参数
export default {
  onLoad(options){
    console.log(options.id) // 1
    console.log(options.name) // 张三
  }
}

uni-app路由传参-对象传参

如果需要传递较多的信息，可以考虑使用对象传参的方式，具体来说，在跳转的时候可以将一个JavaScript对象作为参数传递，接收参数的页面可以通过this.$route.query来获取参数，下面是一个例子：

//跳转时传递参数
uni.navigateTo({
  url: '/pages/detail/detail?user=' + JSON.stringify(user)
})

//接收参数
export default {
  onLoad(){
    let user = JSON.parse(this.$route.query.user)
    console.log(user.name)
    console.log(user.age)
  }
}

uni-app路由传参-路由元信息传参

还有一种传参方式是通过修改路由元信息来完成，路由元信息是uni-app路由提供的一个用于保存路由信息的对象，一旦路由被注册到路由表中，元信息就可以通过$route.meta来获取：

//路由注册时传递参数
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: {
      title: '用户登录',
      requireAuth: false
    }
  }
]

//获取路由元信息
export default {
  created(){
    console.log(this.$route.meta.title) // 用户登录
  }
}

uni-app路由传参-在路由对象中加入自定义数据

如果我们需要在页面之间传递数据，但不想通过路由传参的方式，可以在路由对象中添加自定义数据来完成，比如可以在路由中加入一个myData属性：

//路由注册时传递参数
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    myData: {
      name: '张三',
      age: 18
    }
  }
]

//获取自定义数据
export default {
  created(){
    console.log(this.$route.myData.name) // 张三
  }
}