uni-app跳转页面

冷不防 2023-02-23 03:59 9阅读 0赞

# 点击跳转 #

export default { 
    		data() { 
    			return { 
    				topics:[]
    			}
    		},
    		created() { 
    			this.getTopics()
    		},
    		methods: { 
    			async getTopics() { 
    				this.topics = await this.$http('topics')
    				console.log(this.topics)
    			},
    			goDetail(id) { 
    			// // console.log(this)
    			// this.$router.replace({ 
    			// path:'pages/detail/detail',
    			// query: { 
    			// id:id
    			// }
    			// })
    			// }
    			// this.$router.push({ 
    			// path:'/pages/detail/detail'
    			// })
    			uni.navigateTo({ 
    				url:`../detail/detail?id=${ id}`
    			})
    		}
    	},
    	}

this.$router.replace({
    			path:'pages/detail/detail',
    			query: {
    			id:id
    			}
    				})

上面这种方法还可以写成

this.$router.replace('pages/detail/detail')

this.$router.push(\{  
path:’/pages/detail/detail’  
\})  
路由方法跳转不需要在main.js引入router文件夹，但必须在这段代码里写入’/pages/detail/detail’，***最前面的’/‘必须要有***

# 点击跳转的详情页面 #

created() {
    			console.log(this.$route.query)
    		}

onLoad(options) {
    			console.log(options)
    		}

两种方法都能得到id

# 路由页面 #

需要路由跳转时才需写路由页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduYW5uYW4x_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduYW5uYW4x_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200705123636736.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduYW5uYW4x,size_16,color_FFFFFF,t_70