Vue router详解和用法$router和$route的区别

Vue.js 是一款流行的前端框架，以其轻量级、易用性和强大的生态系统受到开发者的青睐。在 Vue 中，Vue Router 是官方提供的路由管理工具，用于实现单页面应用程序（SPA）的导航和页面切换。通过 Vue Router，开发者可以轻松地管理路由路径、传递参数以及控制页面渲染逻辑。然而，Vue Router 的核心对象 $router 和 $route 常常让初学者感到困惑。它们的功能看似相似，但在实际使用中有明确的分工和区别。本文将深入剖析 $router 和 $route 的区别，并结合实际案例讲解其用法，帮助读者全面掌握 Vue Router 的精髓。

一、 Vue Router 的基本概念

Vue Router 是 Vue.js 的官方路由管理库，用于构建单页面应用（SPA）。它通过监听浏览器地址栏的变化，动态加载对应的组件并更新视图，从而实现页面的无刷新跳转。Vue Router 提供了一套完整的 API，包括路由定义、导航守卫、参数传递等功能，极大简化了 SPA 的开发流程。

Vue Router 提供了两个核心对象：

$router：代表整个路由实例，提供全局的路由操作方法。

$route：代表当前激活的路由信息，包含路径、参数、查询字符串等内容。

理解这两个对象的区别和联系是掌握 Vue Router 的关键。

二、$router 的功能与用法

$router 是 Vue Router 的全局对象，提供了与路由相关的全局方法和属性。它的主要作用是控制路由的导航和跳转。以下是一些常用的 $router 方法：

push(location)：导航到新的路由，不会保存历史记录。

replace(location)：导航到新的路由，替换当前的历史记录。

go(n)：前进或后退指定步数。

back()：后退一步。

forward()：前进一步。

currentRoute：返回当前激活的路由对象。

以下是一个简单的示例，展示如何使用 $router 进行路由跳转：

<template>
<div>
<button@click="navigateToHome">跳转到首页</button>
<button@click="navigateToAbout">跳转到关于页</button>
</div>
</template>
<script>
exportdefault{
methods:{
navigateToHome(){
this.$router.push({name:'home'});
},
navigateToAbout(){
this.$router.push({name:'about'});
}
}
};
</script>

在这个例子中，点击按钮会触发 navigateToHome 或 navigateToAbout 方法，调用 $router.push 方法导航到对应的路由。

三、$route 的功能与用法

$route 是 Vue Router 提供的当前路由信息对象，包含了与当前激活路由相关的信息。它的主要作用是获取和操作当前路由的状态。以下是一些常用的 $route 属性：

path：当前路由的完整路径。

params：动态路由参数。

query：查询字符串参数。

name：路由名称。

matched：匹配的路由记录数组。

meta：路由元信息。

以下是一个示例，展示如何使用 $route 获取当前路由信息：

<template>
<div>
<h1>当前路由路径：{{currentPath}}</h1>
<h2>查询参数：{{queryParams}}</h2>
<h2>动态参数：{{dynamicParams}}</h2>
</div>
</template>
<script>
exportdefault{
computed:{
currentPath(){
returnthis.$route.path;
},
queryParams(){
returnthis.$route.query;
},
dynamicParams(){
returnthis.$route.params;
}
}
};
</script>

在这个例子中，我们通过计算属性获取当前路由的路径、查询参数和动态参数，并将其显示在页面上。

四、$router 和 $route 的区别

尽管 $router 和 $route 都是 Vue Router 的核心对象，但它们的功能和用途存在显著差异。以下是两者的对比：

$router 的使用场景

跳转到其他路由。

监听路由变化。

配置全局导航守卫。

$route 的使用场景

获取当前路由的路径。

解析动态参数和查询参数。

获取路由元信息。

以下是一个综合示例，展示 $router 和 $route 的区别：

<template>
<div>
<h1>当前路由路径：{{currentPath}}</h1>
<h2>查询参数：{{queryParams}}</h2>
<h2>动态参数：{{dynamicParams}}</h2>
<button@click="navigateToAbout">跳转到关于页</button>
</div>
</template>
<script>
exportdefault{
data(){
return{
currentPath:'',
queryParams:{},
dynamicParams:{}
};
},
computed:{
currentPath(){
returnthis.$route.path;
},
queryParams(){
returnthis.$route.query;
},
dynamicParams(){
returnthis.$route.params;
}
},
methods:{
navigateToAbout(){
this.$router.push({name:'about',query:{lang:'en'}});
}
}
};
</script>

在这个例子中，$route 用于获取当前路由信息，而 $router 用于实现路由跳转。

五、Vue Router 的高级用法

动态路由参数是 Vue Router 的一个重要特性，允许在路由路径中定义占位符。例如：

constroutes=[{
path:'/user/:id',
component:UserComponent
}
];

在组件中，可以通过 $route.params.id 获取动态参数值。

Vue Router 提供了多种路由守卫，用于在导航过程中执行预处理逻辑。常见的路由守卫包括：

全局前置守卫：beforeEach

全局解析守卫：beforeResolve

全局后置钩子：afterEach

独享守卫：beforeEnter

通过 $router.push 方法可以传递参数，包括路径参数和查询参数。例如：

this.$router.push({
name:'profile',
params:{id:123},
query:{page:1}
});

在目标组件中，可以通过 $route.params 和 $route.query 获取传递的参数。

Vue Router 是 Vue.js 生态系统中不可或缺的一部分，它通过 $router 和 $route 两个核心对象实现了路由管理的核心功能。本文详细介绍了 $router 和 $route 的区别和用法，并结合实际案例展示了它们在项目中的应用场景。通过掌握这些知识，开发者可以更高效地构建单页面应用，并实现复杂的路由逻辑。希望本文的内容能够帮助读者更好地理解 Vue Router 的工作机制，并在实际开发中灵活运用。

以上就是php小编整理的全部内容，希望对您有所帮助，更多相关资料请查看php教程栏目。