uniapp子组件跳转页面带参数

百变鹏仔 4周前 (11-20) #uniapp

文章标签跳转

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.jsimport 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>去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>去About页面</button>  </div></template><script>export default {  data(){    return {}  },  methods:{    gotoAbout(){      this.$router.push({name: 'About', params: {id: 1, name: '张三'}})    }  }}</script>

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

//router/index.jsimport 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子组件跳转页面带参数

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项