阅读数:255 评论数:0

一、useRouter传参的方式

1、隐匿传参params

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push({
            name: 'Home',
            params: {
                name: 'echohye',
                age: 18
            }
        })
    }
}

注意params只与name搭配生效，name就是route配置时的name

通过useRoute来接收params参数

import { useRoute } from 'vue-router'
export default {
    setup() {
        const route = useRoute()
        console.log(route.params)
    }
}

2、显示传参query

这些参数会跟在url后。

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push({
            path: '/',
            query: {
                name: 'echohye',
                age: 18
            }
        })
    }
}

path和query是一对。

通过useRoute来接收query参数。

import { useRoute } from 'vue-router'
export default {
    setup() {
        const route = useRoute()
        console.log(route.query)
    }
}

二、useRouter的push和replace

push会在浏览器的历史记录中追加一个新的记录，可以通过window.history看到这个记录，当前push时，设置replace为true，也可达到同replace相同的效果。

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push({
            path: '/about/1',
            replace: true
        })
    }
}

replace是替换当前的路由。

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.replace({
            path: '/about/1',
        })
    }
}

三、useRoute

在vue3中，useRoute(接收参数)相当于以前的this.$route，而useRouter（传递参数）相当于this.$router。

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

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
      router.push({
        name: 'about',
        query: {
          ...route.query,
        },
      })
    }
  },
}

四、Vue Router其它的API