uni-app —— 点击跳转页面

Vue.js 实现页面跳转：从首页到详情

最新推荐文章于 2025-10-30 10:44:51 发布

原创最新推荐文章于 2025-10-30 10:44:51 发布 · 1.4w 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

本文介绍了如何使用 Vue.js 中的 uni.navigateTo 方法实现从首页 'index.vue' 到详情页 'detail.vue' 的页面跳转。通过<button>元素触发 goDetail 方法，导航目标路径直接在 './detail' 使用了简写形式。

点击按钮，跳转到另一个页面

页面路径
/pages/index/index.vue
/pages/index/detail.vue

<template>
    <view>
       <view class="btn-area">
           <button @tap="goDetail">点击跳转到详情页面</button>
       </view>    
    </view>
</template>

<script>
export default{
	methods:{
		goDetail(){
			uni.navigateTo({
			    url: './detail'
			});
		}
	}
}

</script>

pages.json:

{
    "pages": [{
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页"
        }
    }, {
        "path": "pages/index/detail",
        "style": {
            "navigationBarTitleText": "详情"
        }
    }]
}