$router与$route的区别

最新推荐文章于 2025-02-06 22:17:10 发布

前端韦小宝

最新推荐文章于 2025-02-06 22:17:10 发布

阅读量439

点赞数 1

文章标签：网络

本文链接：https://blog.csdn.net/lou15516575959/article/details/125679352

版权

本文详细介绍了Vue.js中this.$router和this.$route的区别，以及它们在路由跳转中的应用。this.$route提供了当前路由的详细信息，如path、name、query等，而this.$router主要用于编程式导航，支持push、replace等多种方法。通过实例展示了如何使用this.$router进行不同类型的路由跳转，包括字符串路径、对象路径、命名路由和带查询参数的跳转。同时，还解释了path:'name'和path:'/name'在当前路径为home时的跳转区别。

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

1、区别：

this.$router: 是全局路由对象

this$route: 是当前激活的路由对象，包含了当前的路由信息。

console.log(this.$route);
控制台输出：
{
    fullPath:'/home'       //包含查询参数和 hash 的完整路径
    path:'',               //当前路由路径，绝对路径
    name:'Home',
    meta:{auth:true},      //是否需要登录
    hash:'',
    hash:'',
    query:{id:1}               //表示 URL 查询参数,相当于/home?id=1
    matched:??

}

2、this.$router的方法：

1.字符串 this.$router.push('/home')

2.对象 this.$router.push({path:'home'})

3.命名的路由 this.$router.push({name:'home',params:{id:1}})

4.带查询参数 this.$router.push({path:'home',query:{id:1}})

3、路由跳转方式:

1.声明式导航：<router-link :to="">

2：编程式导航：this.$router.push();

4、path:'name' 和 path:'/name' 区别:

假如当前路径是home

this.$router.push('/name') =>  /home/name

this.$router.push('name')  =>  /name