VUE3.0從安裝到應用 (4)

路由跳轉傳參

vue2.x

this.$router.push({
        path:`/home`,
        query:{id:1}
      })
           

vue3

import { onMounted, ref, nextTick } from "vue"
import { useRouter } from 'vue-router';
export default function home() {
    const router = useRouter();
    const lArr = ref([]);
    const inputValue = ref();
    const showV = ref(true);
    const video = ref(null);
    onMounted(async () => {

    });
    const helloEvent = () => {
        router.push({
            path:`/tab`,
            query:{id:1}
        });
    };
    return {
        showV,
        helloEvent,
    }
}

           

vue3裡面是沒有this指向的，引入 useRouter，然後在方法裡聲明變量進行跳轉。

接收頁面

import { onMounted, ref, nextTick,getCurrentInstance } from "vue"
import { useRouter } from 'vue-router';
export default function tab() {
    const router = useRouter();
    const ctx = getCurrentInstance();
    const lArr = ref([]);
    const inputValue = ref();
    const showV = ref(true);
    const video = ref(null);
    onMounted(async () => {
        console.log(router.currentRoute.value.query.id);
    });
    const helloEvent = () => {
        alert(1);
        nextTick(() => {
            alert(2)
        })
    };
    return {
        showV,
        helloEvent,
    }
}

           

接收路徑也變了:router.currentRoute.value.query.id,這樣就可以接收到參數了。