Vue3x路由跳转及传参(useRouter)

useRouter 相当于vue2的this.$router全局的路由实例，是router构造方法的实例

useRoute 相当于vue2的this.$route表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route路由记录

import { useRoute, useRouter } from "vue-router"

useRoute, useRouter必须写到setup中,详见vue-next-router.强行在函数中使用这两会报undefined,导致无法获取路由数据和路由方法

API Reference | Vue Router

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

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

// app.vue
import { useRouter } from "vue-router"

setup(){
    const router = useRouter()
    let goto = function () {
      router.push('/index')

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

      // query 参数
      router.push({
        path: '/index',
        // name: 'index',
        query: {
          id: 123,
          name: 'nick'
        }
      })
        
      // params 参数
      router.push({
        name: 'index',
        params: {
            id: '123',
            name: 'nick'
        }
      })
    }

    return {
        goto()
    }
}

index页面接收传参

// index.vue
import {useRouter} from 'vue-router'
setup() {
    const router = useRouter()
    let getPageParams = function () {
      let params = router.currentRoute.value.query // query参数跳转
      // let params = router.currentRoute.value.params // params参数跳转
      console.log('currentRoute.value:', router.currentRoute.value)
      console.log('params:', params)
    }
    return {
      getPageParams
    }
  }