跳转传参and接收参数

• route:读取当前路由信息（参数、查询参数、路径等）
• router:进行路由跳转操作（push、replace、go等）

1. 跳转

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 跳转到指定路径
router.push('/dashboard')

// 带参数跳转
router.push({ path: '/dashboard', query: { id: '123' } })

// 命名路由跳转
router.push({ name: 'dashboard', params: { id: '123' } })

// 替换当前路由
router.replace('/dashboard')

// 前进/后退
router.go(1)
router.go(-1)
</script>

2. 读取：

1.直接访问queryd对象

import { useRoute } from 'vue-router'

const route = userRouter()

const id = route.query.id

2.使用computed响应式获取

import { useRoute } from 'vue-router'

import { conputed } from 'vue'

const route = userRouter()

const userId = computed(()=>route.query.id)

3.获取多个参数

import { useRoute } from 'vue-router'

const route = userRouter()

const { id,name,type } = route.query

4.在页面中的生命周期里面接收参数

import { onMounted } from 'vue'

import { useRoute } from 'vue-router'

const route = userRouter()

//生命周期中的挂载后（最常用）

onMounted(()=>{

const id = route.quert.id

console.log("id",id)

})

5.监听路由参数变化

import { watch } from 'vue'

import {useRoute } from 'vue-router'

const route = useRoute()

//监听query参数变化

watch(

()=>route.query.id,

(newId,oldId)=>{

console.log(阐述变化：',oldId,'->',newId)

})

//监听所有query参数变化

watch(()=>route.query,

(newQuery)=>{

console.log('所有参数变化'，newQuery)

},

{deep:true}

)

6.在模板中直接使用
<div>ID:{{$route.query.id}}</div>

7.类型安全的方式

import { useRoute } from 'vue-router'

import { conputed } from 'vue'

const route = userRouter()

const query = computed(()=>route.query.id as string | undefined)

if(query.value){
console.log('ID',queryId.value)
}

8.实际应用写在onMounted里面