vue 返回上一页传参_Ionic5 Vue3路由跳转、ionic路由跳转传值 返回上一页 、返回根...

本文详细介绍了在Ionic5 Vue3环境下如何进行路由跳转,包括普通路由、带参数的Get传值、编程式导航以及如何使用router返回上一页和返回根页面。同时,还提供了访问IonRouter实例的方法,以便处理特定场景,如硬件后退按钮事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、Ionic5 Vue3普通路由跳转

Icon组件演示

toolbar组件演示

ion-back-button中default-href可以配置没有路由的时候返回的页面

新闻列表

二、Ionic5 Vue3路由跳转传值

Get传值

this.$route.query

Get传值

import { useRoute } from 'vue-router';

export default defineComponent({

...

setup() {

const route = useRoute();

const { id } = route.query;

return { id };

}

})

三、Ionic5 Vue3路由编程式导航(Js跳转路由)

this.$router.push({ path: 'news' })

this.$router.push({

path: '/newsContent/495'

});

this.$router.push({ path: '/newscontent', query:{aid:14} }

this.$router.push({ path: '/newscontent/123'})

四、Ionic5 Vue中通过router返回上一页

router.back()

router.go(-1)

import { useRouter } from 'vue-router';

setup() {

//route包含的是属性

const route = useRoute();

// router里面包含的是方法

const router=useRouter()

const { id } = route.query;

const goBack=()=>{

router.go(-1)

}

console.log(id);

return { id,goBack };

}

五、Ionic5 Vue中通过router返回根

import { useRouter } from 'vue-router';

setup() {

// router里面包含的是方法

const router=useRouter()

const goRoot=()=>{

router.replace("/tabs/tab2")

}

return {goRoot};

}

六、访问IonRouter 实例

在某些用例中,您需要IonRouter从Vue应用程序中访问实例。例如,当用户按下Android上的硬件后退按钮时,您可能想知道您是否位于应用程序的根页面。

import { useIonRouter } from '@ionic/vue';

...

export default {

setup() {

const ionRouter = useIonRouter();

if (ionRouter.canGoBack()) {

// Perform some action here

}

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值