阿珊解说Vue中`$route`和`$router`的区别

简介: 阿珊解说Vue中`$route`和`$router`的区别

摘要:


🤔 在Vue开发中,我们经常使用$route和$router这两个概念,但你知道它们之间的区别吗?本文将详细解析$route和$router的不同之处,帮助读者更好地理解和使用它们。👩‍💻


引言:


🌈 Vue.js框架以其简洁的语法和声明式的数据绑定而受到开发者的喜爱。在Vue中,路由管理是实现单页面应用(SPA)的关键功能。在路由中,我们经常听到$route和$router这两个概念,但你知道它们之间的区别吗?在这篇文章中,我将带你深入了解$route和$router的不同之处。🚀


正文:


1. 🔧 $route

类型:$route是一个对象,它包含了当前路由的信息,如路径、查询参数、路由参数等。

应用场景:通常用于获取当前路由的信息,如在导航守卫中检查当前路由是否符合要求。


$route 是 Vue.js 中的一个对象,它用于管理当前路由的信息。它包含了当前路由的路径、查询参数、路由参数等信息。$route 对象可以在任何组件内访问,它是由 Vue Router 自动注入的。


以下是一些常用的 $route 属性和方法:


$route.path:当前路由的路径。


$route.params:当前路由的动态参数对象。


$route.query:当前路由的查询参数对象。


$route.name:当前路由的名称。


$route.matched:当前路由匹配的路由记录数组。


$route.isActive:当前路由是否处于激活状态。


$route.isExactActive:当前路由是否处于精确激活状态。


$route.replace:将当前路由替换为指定的路由。

以下是一个简单的示例:

<template>
  <div>
    <p>当前路由路径:{{ $route.path }}</p>
    <p>当前路由参数:{{ $route.params }}</p>
    <p>当前路由查询参数:{{ $route.query }}</p>
    <p>当前路由名称:{{ $route.name }}</p>
    <p>当前路由匹配的路由记录数组:{{ $route.matched }}</p>
    <p>当前路由是否处于激活状态:{{ $route.isActive }}</p>
    <p>当前路由是否处于精确激活状态:{{ $route.isExactActive }}</p>
    <button @click="$route.replace('/about')">将当前路由替换为 /about</button>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

在这个示例中,我们展示了如何使用 $route 对象的一些属性和方法。当点击按钮时,会将当前路由替换为 /about。


2. 🔧 $router

类型:$router是一个实例,它包含了路由器的配置和操作方法,如添加路由、导航等。

应用场景:通常用于进行路由的跳转、添加导航守卫等操作。


$router 是 Vue.js 中的一个对象,它用于管理路由。它包含了路由的配置、导航、历史记录等功能。$router 对象可以在任何组件内访问,它是由 Vue Router 自动注入的。


以下是一些常用的 $router 属性和方法:


$router.currentRoute:当前路由对象,包含了当前路由的路径、参数、查询等信息。


$router.history:路由历史记录,是一个数组,包含了每次路由跳转的记录。


$router.current:当前路由在路由历史记录中的索引。


$router.replace:将当前路由替换为指定的路由。


$router.push:跳转到指定的路由。


$router.back:后退到上一个路由。


$router.forward:前进到下一个路由。

以下是一个简单的示例:

<template>
  <div>
    <p>当前路由路径:{{ $router.currentRoute.path }}</p>
    <p>当前路由参数:{{ $router.currentRoute.params }}</p>
    <p>当前路由查询参数:{{ $router.currentRoute.query }}</p>
    <button @click="$router.replace('/about')">将当前路由替换为 /about</button>
    <button @click="$router.push('/contact')">跳转到 /contact</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.forward()">前进</button>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

在这个示例中,我们展示了如何使用 $router 对象的一些属性和方法。当点击按钮时,会执行相应的路由操作。


3. 🔧 $route和$router的区别

概念:$route是路由信息对象,$router是路由器实例。

使用场景:$route用于获取和检查路由信息,$router用于操作路由。

功能:$route主要提供路由信息,$router提供路由器的配置和操作方法。


🌟 总结


在本篇文章中,我们详细解析了Vue中的$route和$router的区别。通过对比分析,我们应该对这两个概念有了更深入的了解。在实际开发中,正确使用$route和$router,将使我们的Vue应用更加高效和优质。🚀


参考资料:


  1. Vue.js官方文档:路由
  2. Vue Router官方文档
相关文章
|
1天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
7 2
|
3天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
59 7
使用 Vue CLI 脚手架生成 Vue 项目
|
4天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
4天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
10 1
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1003 0
|
12天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
6天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
20 0
|
6天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
22 2
|
6天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
14 3