Vue3和typeScript路由传参

Erica_莲子2023-08-03 9:56

1 params传的参数，页面刷新就消失,而query传的参数，页面刷新还会存在，所以通常用query。

query传参

跳转页面：拿到router对象,调用push方法做跳转.

javascript 复制代码

import { useRoute,useRouter} from "vue-router";
export default class myView extends Vue {

 // 返回了路径信息。跟this.$route一样
    route = useRoute()
//返回了路由对象
    router = useRouter()
    handle1():void{
        this.$router.push({
            path:"/",
            name:"home",
            query:{
                id:123

            }
        })
    }

}

被跳转页面拿到route对象，读取query参数

javascript 复制代码

import {useRoute} from 'vue-router'
export default class HomeView extends Vue {

  route = useRoute()
  // 初始化
  public created(): void {
      console.log(this.route.query,"query参数")
     
  }
}

2 params传参，路径要占位，必须用name，不能用path，

占位

javascript 复制代码

import { useRoute,useRouter} from "vue-router";
export default class myView extends Vue {

 // 返回了路径信息。跟this.$route一样
    route = useRoute()
//返回了路由对象
    router = useRouter()
    handle2():void{
        this.$router.push({
            name:"home",
            params:{
                id:123,
                name:"小红"
            }
        })
    }

}

接收参数

javascript 复制代码

import {useRoute} from 'vue-router'
export default class HomeView extends Vue {

  route = useRoute()
  // 初始化
  public created(): void {
     console.log(this.route.params,"params参数")
  }
}