vue3路由新玩法useRoute和useRouter详解
原来的vue2路由是通过this.$route和this.$router来控制的。现在vue3有所变化，useRoute相当于以前的this.$route，而useRouter相当于this.$router
我们通过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/
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Ant Design Vue是使用Vue实现的遵循Ant Design设计规范的高质量UI组件库,用于开发和服务于企业级中后台产品,下面这篇文章主要给大家介绍了关于vue中ant-design-vue组件安装与使用的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue中 render 函数功能与原理,结合实例形式分析了vue中render函数的基本功能、原理及相关操作注意事项,需要的朋友可以参考下2023-06-06
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧2022-12-12
在 Vue 中,ref 是一个响应式对象,修改 ref 的值会触发组件的重新渲染,因为 Vue 的 ref 是基于其响应式系统实现的,任何对 ref 的修改都会被 Vue 检测到,并触发组件的更新,本文给大家介绍Vue 和 React 使用ref的示例,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了基于vue实现探探滑动组件功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage样式失效解决
在项目中使用elementui确实是很方便的一件事,下面这篇文章主要给大家介绍了关于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage样式失效解决的相关资料,需要的朋友可以参考下2023-02-02
vue插件mescroll.js实现移动端上拉加载和下拉刷新
这篇文章主要介绍了vue插件mescroll.js实现移动端上拉加载和下拉刷新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
vue3中的watch是一个组合式的API使用时需要引入,下面这篇文章主要给大家介绍了关于vue3下watch使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue3异步组件Suspense的使用方法详解,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue单文件组件无法获取$refs的问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
最新评论