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都行。(页面链接 有参数,即:/index?id=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
    }
  }

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐