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,这样就可以接收到参数了。