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的值

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM