Vue3x路由跳转及传参(router.js 函数式)

页面跳转及传参：

需引入router.js

1. 传递参数使用query,path/name都行。（页面链接 有参数，即:/index?id=123&name=nick）

import { router } from '@/router'

// 跳转
router.push('/index');

router.push('/index?id=123')
router.push('/index?id=123&name=nick')

// 传递参数使用query,path/name都行。（页面链接 有参数，即:/index?id=123&name=nick）
router.push({
    path: '/index',
    // name: 'index',
    query: {
        id: '123',
        name: 'nick'
    }
})

// index.vue
import { router } from '@/router'

// 接收参数
let query = router.currentRoute.value.query
console.log('currentRoute.value:', router.currentRoute.value)
console.log('query:', query)

2. 传递参数使用name+params（页面链接 无参数，即:/index）

// 传递参数使用name+params（页面链接 无参数，即:/index）
router.push({
    name: 'index',
    params: {
        id: '123',
        name: 'nick'
    }
})

//index.vue
import { router } from '@/router'

// 接收参数
let params = router.currentRoute.value.params
console.log('currentRoute.value:', router.currentRoute.value)
console.log('params:', params)

*说明：传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name。