vue3中路由跳转及传参

vue3中在setup中并没有this,所以路由跳转和传参的方式都要有所改变

1.路由跳转

1.1 引入import { useRouter } from ‘vue-router‘

1.2在setup中创建路由对象 ，语法以前vue2类似，这里携带id的路由参数

setup(){
    const router = useRouter();
    function goSeekHelpDetail (){
      router.push({
        name:‘taskSeekHelpDetail‘,
        query:{
          id: ‘1‘
        }
      })
    };
    return{
    }
  }

2.这里获取路由参数，就在vue3新增的onMounted生命钩子获取路由参数。

import {getCurrentInstance,onMounted} from ‘vue‘

setup(props,{emit}){
    const router = useRouter();
    onMounted(()=>{
      // 获取当前路由实例参数
      console.dir(router.currentRoute.value.query.id);
    })
    return{
    }
  }

成功获取id的值

vue3中路由跳转及传参

原文：https://www.cnblogs.com/stepehZYH/p/15067526.html