uniapp子组件跳转页面带参数-uni-app-PHP中文网

uniapp子组件跳转页面带参数

PHPz

发布： 2023-05-25 22:19:37

原创

1670人浏览过

uniapp作为一个跨平台的开发框架，其提供了非常方便的组件化开发方式，允许我们将页面拆分成小而简洁的子组件，从而提高了代码的可维护性和可扩展性。但是，在实际开发中，我们会遇到需要在子组件中进行页面跳转并且需要传递参数的情况，这就需要我们对uniapp中的路由和传参机制有一定的了解。

一、Uniapp路由

Uniapp中的路由机制使用的是vue-router，因此它支持 Vue.js 的原生路由定义和 API。我们知道，路由在前端应用中负责页面之间的跳转，Uniapp提供了两种路由模式：

H5模式：通过URL的方式进行路由跳转，底层采用的是history API。
APP模式：通过原生APP的框架进行路由跳转，底层采用的是Native API。

Uniapp中定义路由的方式和Vue.js相同，我们在router文件夹下的index.js中进行路由的定义。我们以一个简单的例子来说明一下：

//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

登录后复制

上面的代码定义了一个路由规则，将根目录指向HelloWorld组件。该组件将在我们访问项目的根路由时被渲染至页面。在实际开发中，我们需要根据具体业务需求来定义路由规则。

二、页面跳转

声明式导航：通过在模板中使用router-link标签来跳转到其他页面。

<template>
  <div>
    <router-link to="/">HelloWorld</router-link>
    <router-link to="/About">About</router-link>
  </div>
</template>

登录后复制

编程式导航：通过$router.push或者$router.replace方法来跳转到其他页面。

<template>
  <div>
    <button @click="gotoAbout()">去About页面</button>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
    gotoAbout(){
      this.$router.push("/About")
    }
  }
}
</script>

登录后复制

三、页面传参

在uniapp中，页面传参和Vue.js一样，其实就是通过query、params、meta和props等属性来完成。不过有一点需要注意的是，在uniapp中路由跳转的时候，建议使用params来传递参数。因为query一般会被用来在URL中传递参数，而在原生APP中还需要处理页面恢复的情况，所以建议使用params。

通过router-link标签传参

<template>
  <div>
    <router-link :to="{name: 'About', params: {id: 1, name: '张三'}}">About</router-link>
  </div>
</template>

登录后复制

通过编程式导航传参

<template>
  <div>
    <button @click="gotoAbout()">去About页面</button>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
    gotoAbout(){
      this.$router.push({name: 'About', params: {id: 1, name: '张三'}})
    }
  }
}
</script>

登录后复制

在路由规则中定义路由参数

//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/About/:id/:name',
      name: 'About',
      component: About
    }
  ]
})

登录后复制

在路由规则中定义了id和name两个参数，我们可以在组件内通过this.$route.params来获取参数。

<template>
  <div>
    <h1>这是About页面</h1>
    <h2>{{this.$route.params.id}}</h2>
    <h2>{{this.$route.params.name}}</h2>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  }
}
</script>

登录后复制

四、总结

通过以上这些内容，我们已经了解了在Uniapp中子组件跳转页面并传递参数的方法。在实际开发中，我们可以根据具体业务需要来选择使用哪种方式来进行跳转和传参。无论哪种方式，我们都需要注意保持良好的代码风格和规范，让代码易于维护和扩展。

以上就是uniapp子组件跳转页面带参数的详细内容，更多请关注php中文网其它相关文章！