赞
踩
uniapp内置多种跳转方式,我这里介绍两个最常用的跳转,uni.navigateTo和uni.switchTab,前者为跳转到非TabBar页面,后者为跳转到TabBar页面,所谓TabBar就是底部导航栏配置的页面,例如下方的index.vue。
- "tabBar": {
- "list": [{
- "pagePath": "pages/index/index",
- "text": "首页",
- "iconPath": "static/buliangzhu.png",
- "selectedIconPath": "static/zhuyeliang.png"
- },
-
- {
- "pagePath": "pages/user/user",
- "text": "个人中心",
- "iconPath": "static/user2.png",
- "selectedIconPath": "static/user1.png"
- }
-
- ]
- },
配置成导航栏的页面无法通过navigateTo方法跳转,只能通过switchTab方法。
例如我们需要在index.vue页面里面跳转到test1.vue,test1是非tabBar页面,就给需要绑定事件的按钮添加点击事件。再在methods里面编写方法,调用uni.navigateTo
- <!-- index.vue -->
- <template>
- <view class="home ">
- <button @click="toTest1"></button>
- </view>
-
- </template>
-
- <script>
- export default {
- data() {
- return {
- }
- },
- methods: {
- toTest1() {
- uni.navigateTo({
- url:'/pages/test1/test1'
- })
- }
- }
- }
- </script>
这里我们在test1页面中想点击按钮跳转到index页面
-
- <template>
- <view class="home ">
- <button @click="toIndex"></button>
- </view>
-
- </template>
-
- <script>
- export default {
- data() {
- return {
- }
- },
- methods: {
- toIndex() {
- uni.switchTab({
- url:'/pages/index/index'
- })
- }
- }
- }
- </script>
- success: (res) => {
- console.log(res.data.status, '状态');
- if (res.data.status == 1) {
- this.msgType = 'success'
- this.messageText = '更新成功'
- this.$refs.message.open()
- uni.switchTab({
- url: '/pages/index/index'
- })
- } else {
- this.msgType = 'error'
- this.messageText = '更新失败'
- this.$refs.message.open()
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。