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

被折叠的 条评论
为什么被折叠?



