1、引入useRouter
import {useRouter} from 'vue-router'
2、调用router实现编程式导航
const $router=useRouter()
const 方法名()=>{
$router.path({
name:'name名'
})
或
$router.path({
path:'path名'
})
}
3、query传参
import { useRouter } from 'vue-router';
...
const router = useRouter()
const toDetail = (item: Item) => {
router.push({
path: '/info',
query: item
})
}
接收参数
<template>
<div>
<div>ID:{{route.query?.id}}</div>
<div>名称:{{route.query?.name}}</div>
<div>价格:{{route.query?.price}}</div>
</div>
</template>
<script setup lang='ts'>
import { useRoute } from 'vue-router';
...
const route = useRoute()
</script>
<style lang='less' scoped>
</style>
4、params传参
import { useRouter } from 'vue-router';
...
const router = useRouter()
const toDetail = (item: Item) => {
router.push({
name: 'Info',
params: item
})
}
接收参数
<template>
<div>
<div>ID:{{route.params?.id}}</div>
<div>名称:{{route.params?.name}}</div>
<div>价格:{{route.params?.price}}</div>
</div>
</template>
<script setup lang='ts'>
import { useRoute } from 'vue-router';
...
const route = useRoute()
</script>
<style lang='less' scoped>
</style>