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中子组件跳转页面并传递参数的方法。在实际开发中，我们可以根据具体业务需要来选择使用哪种方式来进行跳转和传参。无论哪种方式，我们都需要注意保持良好的代码风格和规范，让代码易于维护和扩展。
