vue3.0接收路由传递的参数

一.跳转路由的两种方式

第一步：引入useRouter
import {useRouter} from ‘vue-router’
//useRouter是全局的路由对象
第二步：在setup中复制一下代码：

let router = useRouter（）
let goto = ()=>{
	//跳转路由
	**//1.push传入路径或者传入一个对象，push传值有三种方法：**
	//第一种方法
	router.push('/home')
	//第二种方法
	router.push({
		path:'/home'
	})
	//第三种方法
	router.push({
		name:'Home'
	})


	**//2.使用replace传入路径或者传入一个对象**
	//第一种方法
	router.replace('/home')
	//第二种方法
	router.replace({
		path:'/home'
	})
	//第三种方法
	router.replace({
		name:'Home'
	})
}

提示：

push受浏览器的影响，可以前进后退；
replace不受浏览器的影响，不可以前进后退；
应用的场景：
进入启动页或者广告页之后不会在显示了，就可以用replace
push是用户使用浏览器的后退按钮，去回到上一个页面，而replace不行

二.跳转路由的其他方法

import {useRouter} from 'vue-router'
let router = useRouter（）
//后退
router.back()
//前进
router.forward()
//进到哪一格
router.go(-1)//传-1就是后退一格
router.go(1)//传1就是前进一格
router.go(2)//传2就是前进2格

三.vue3.0路由传参

1.query传参

let num1=ref(10)
let obj= ref({
	name:'hahha'
})
let query=()=>{
	router.push({
		path:'/about',//query传参path和name属性都可以
		query:{
			num:num1.value,
			obj:JSON.stringify(obj.value)
		}
	})
}

2.params传参

let num1=ref(10)
let obj= ref({
	name:'hahha'
})
let params=()=>{
	router.push({
		name:'About',//params传参只能用name属性
		params:{
			num:num1.value,
			obj:JSON.stringify(obj.value)
		}
	})
}

两者都是可以通过路由跳转的方式，把参数传到另一个路由；
query传参是传在url上的，而params传参是我们看不到的，
query传参刷新页面后仍然存在，而params传参刷新后就没有了

四.vue3.0接收路由传递的参数

第一步：引入useRoute
import {useRoute} from ‘vue-router’
//useRouter是全局的路由对象
//useRoute是当前路由对象

import {useRoute} from 'vue-router'
let route = useRoute()
console.log(route.query)  //query传参
console.log(route.params)  //params传参页面刷新后参数就没有了