总结this,$router与this.$route的含义以及常见用法

 理解

this.$router:全局的路由对象,包含和很多属性和对象,任何页面都可以调用其方法。

this.$route:当前路由对象,是一个局部的路由对象,每一个路由都有一个route对象,可以使用其属性。

this.$router的方法

this.$router.push

通过修改url实现路由跳转,this.$router传递参数有两种方式

一、传递参数会拼接在路由后面,出现在地址栏

        传递参数:this.$router.push({path:‘路由’,query:{key:value}})

        参数取值:this.$route.query.key

二、传递参数不会拼接在路由后面,地址栏看不见参数

        传递参数:this.$router.push({name:'路由的name',params:{key:value}})

        参数取值:this.$route.params.key

注意:在this.$router.push中 path 也是传递params的。所以path与params 不能在一起使用或者提供首页地址

代码

// 字符串
this.$router.push('/index') 
// 对象
this.$router.push({path:'/index'})
// 带查询参数,变成/backend/order?selected=2/,query传参
this.$router.push({path:'/index', query:{name: '123'} })
// 命名的路由 params传参
this.$router.push({name:'index', params:{name: '123'} })

this.$router.replace

跳转到指定路由,替换history中最后一个记录,点击后退会返回至上一个页面(A->B->C被替换成A->C)

replace 属性默认为false,点击时不会留下history记录,push方法也可以传replace

// 声明式
<reouter-link :to="..." replace></router-link>
// 编程式:
router.replace(...)
// push方法也可以传replace
this.$router.push({path: '/homo', replace: true})

this.$router.go

在history中记录的前进或者后退val步

// 到下一页 前进一步
this.$router.go(1)

// 到上一页 后退一步
this.$router.go(-1)

this.$route

this.$route.query

获取this.$router.push中query的值,在URL中带参数

this.$route.params

获取this.$router.push中params的值,在URL中不带参数

this.$route.path

获取当前路由对象的路径

this.$route.name

获取当前路径名字

this.$route.matched

数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象

本文参考

https://blog.csdn.net/u014635374/article/details/116162950

$route 获取当前路径_$route.path_hhy980205的博客-CSDN博客

Logo

前往低代码交流专区

更多推荐