Ionic5 Vue3路由跳转、ionic路由跳转传值 返回上一页 、返回根

ionic5 Vue3实战教程： https://www.itying.com/goods-1150.html

一、Ionic5 Vue3普通路由跳转

官方文档：https://ionicframework.com/docs/vue/navigation

  <ion-button @click="this.$router.push('/icon')"> Icon组件演示 </ion-button>
  <ion-button router-link="/toolbar"> toolbar组件演示 </ion-button>

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

<ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button default-href="/tabs/tab1"></ion-back-button>
        </ion-buttons>
        <ion-title>新闻列表</ion-title>
      </ion-toolbar>
  </ion-header>

二、Ionic5 Vue3路由跳转传值

<router-link to="/newsContent?id=2">Get传值</router-link>
this.$route.query


<router-link to="/newsContent?id=2">Get传值</router-link>

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返回上一页

https://next.router.vuejs.org/api/#go

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
    }
  }
}