vue的跳转传参
1、接收参数使用route,route包含路由信息，接收参数有两种方式,params和query
path跳转只能使用query传参,name跳转都可以
params：获取来自动态路由的参数
query：获取来自search部分的参数
写法
path跳,query传
传参数
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter();
router.push({
path: '/home',
query: {
id: 1
}
});
}
}
接参数
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute();
console.log(route.query.id);
}
}
name跳,query传
传参数
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter();
router.push({
name: 'home',
query: {
id: 1
}
});
}
}
接参数
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute();
console.log(route.query.id);
}
}
使用name跳,params传（路由处必须配置动态路由）
传参数
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter();
router.push({
name: 'home',
params: {
id: 1
}
});
}
}
接受参数
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute();
console.log(route.params.id);
}
}