1 params传的参数,页面刷新就消失,而query传的参数,页面刷新还会存在,所以通常用query。
query传参
跳转页面:拿到router对象,调用push方法做跳转.
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参数
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,
占位
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:"小红"}})}}
接收参数
import {useRoute} from 'vue-router'
export default class HomeView extends Vue {route = useRoute()// 初始化public created(): void {console.log(this.route.params,"params参数")}
}