$router和$route的区别

最新推荐文章于 2023-07-30 15:08:05 发布

二哈没烦恼

最新推荐文章于 2023-07-30 15:08:05 发布

阅读量2.3k

点赞数 2

文章标签： vue.js javascript 前端

本文链接： https://blog.csdn.net/weixin_45774558/article/details/128917562

版权

文章详细介绍了VueRouter中的$router对象，用于路由操作，如push和replace方法。同时阐述了$route对象，用于获取路由信息，包括path、params、query等属性。通过示例展示了如何进行路由跳转和接收路由参数。

摘要由CSDN通过智能技术生成

$router
$router用来操作路由，是 VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，是一个全局对象，他包含了所有的路由包含了许多关键的对象和属性

举例：
history对象：

$router.push({path:'home'});
//本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

方法：

$router.replace({path:'home'});
//替换路由，没有历史记录

$route
$route用来获取路由信息，是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
我们可以从vue devtools中看到每个路由对象的不同

常用例子：
$router操作路由跳转

//常规方法
this.$router.push("/login");
//使用对象的形式 不带参数
this.$router.push({ path:"/login" });
//使用对象的形式，参数为地址栏上的参数
this.$router.push({ path:"/login",query:{username:"jack"} }); 
使用对象的形式 ，参数为params 不会显示在地址栏
this.$router.push({ name:'user' , params: {id:123} });

$route读取路由参数接收

主要的属性有：
this.$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ew
 
this.$route.params 对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面
 
this.$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面
 
this.$route.router 路由规则所属的路由器
 
this.$route.name 当前路由的名字，如果没有使用具体路径，则名字为空