Vue3x路由跳转及传参(useRouter)
useRouter 相当于vue2的this.$router全局的路由实例,是router构造方法的实例useRoute 相当于vue2的this.$route表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route路由记录import { useRoute, useRouter } from "vue-router"useRoute, useRoute
·
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,导致无法获取路由数据和路由方法
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
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)