vue3路由新玩法useRoute和useRouter详解

更新时间：2022年08月05日 09:22:19 作者：可缺不可滥

这篇文章主要介绍了vue3路由新玩法useRoute和useRouter，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

我们通过useRouter来手动控制路由变化

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push("/home")
    }
}

通过useRouter传参的三种方式

隐式传参params

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

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

通过useRoute来接收params参数

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

显式传参query

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

path与query是一对，name和params是一对，请别混用。

通过useRoute来接收query参数

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

总结一下显式路由和隐式路由的区别

除了他们的传递和接收方式不同外

显式query会很明显的跟在新的url上，而隐式params不会

隐式params在刷新后可能会消失，我们可以在它存在的时候存如缓存中，如localstorage

隐式params比显式query相对而言更安全，不会将参数直接暴露给用户

显示query在浏览器的url上，如果你直接通过字符串的方式去取，可能会涉及转码等问题，当然useRoute将这些都处理好了，所以还是推荐通过useRoute.query去取显式路由的参数

动态路由传参

首页跟以前一样，我们在配置页面路由的时候就需要配置动态路由的名称，这里配置id

const routes: Array<RouteRecordRaw> = [
  {
    path: '/about/:id',
    name: 'About',
    component: About
  }
]

useRouter 传递动态参数id = 1 ，大多数时候动态参数都是简单数据类型，如果不是，你没必要用动态参数。

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

通过useRoute来接收动态参数的方式和params一样

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

useRouter 的push和replace

push就是如上面的代码一样，就是在浏览器的历史记录中追加一个新的记录，你可以通过window.history看到这个记录。

而replace则是将当前的路由记录替换掉，替换后你如果回退，会发现上一个路由地址已经消失了。

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

我在无意之间发现一个有意思的问题，也不知道是不是一个bug

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

当我调用push方法传入replace为true时，真的就是replace的形式，传入replace为false才恢复正常

然后我又试了一下replace

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

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

以上两种方式都是replace的形式。

push的时候传入replace为true结果是replace，那还需要replace方法么，也不知道是不是bug。

当然了，你可能还有许多关于vue3使用路由的问题，去这里基本都可以得到解决 https://router.vuejs.org/zh/api/

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue如何循环提取对象数组中的值
这篇文章主要介绍了Vue如何循环提取对象数组中的值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
对vue 键盘回车事件的实例讲解
今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
详解如何在vue中封装axios请求并集中管理
这篇文章主要为大家详细介绍了如何在vue中封装axios请求并集中管理,w文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下
2023-10-10
vue调用谷歌授权登录获取用户通讯录的实现示例
本文主要介绍了vue调用谷歌授权登录获取用户通讯录的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
这篇文章主要介绍了Elementui表格组件+sortablejs实现行拖拽排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
Vue使用百度地图实现城市定位
这篇文章主要为大家详细介绍了Vue使用百度地图实现城市定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue计算属性与监视属性详细分析使用
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
2022-11-11
vue v-model的详细讲解(推荐!)
vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下
2022-04-04
vue实现商品多选功能
这篇文章主要为大家详细介绍了vue实现商品多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue手机号正则匹配姓名加密展示功能的实现
这篇文章主要介绍了Vue手机号正则匹配，姓名加密展示,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08