【Vue框架】 router和route是什么关系

前言

之前没太注意,写着写着突然发现它们貌似不太一样,记录以下,回顾的看总结就好。

1、总结✨

route:当前激活路由的对象,用于访问和操作当前路由的信息
router:管理多个route的对象,整个应用的路由管理

2、详细了解

router是Vue Router的实例,它管理着应用程序的路由。它负责监听URL的变化,并根据配置的路由规则将请求导航到相应的组件。可以通过创建一个router实例,然后将其挂载到Vue根实例上来启用路由功能。

javascript 复制代码
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');

在上述示例中,我们创建了一个router实例,并将其传递给Vue根实例的router选项,以启用路由功能。

route是当前路由的对象。它包含有关当前活动路由的信息,例如路径、参数、查询字符串等。在组件中,可以通过访问this.$route来访问当前route对象。

route对象具有许多属性,包括pathparamsqueryhash等等,用于访问和操作当前路由的相关信息。在组件中可以使用route对象来读取URL参数、查询字符串,或者在路由切换时进行相应的操作。

以下是一个简单的示例,展示了如何在组件中使用route对象:

javascript 复制代码
<template>
  <div>
    <p>当前路由路径: {{ $route.path }}</p>
    <p>当前路由参数: {{ $route.params }}</p>
    <p>当前路由查询字符串: {{ $route.query }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params);
    console.log(this.$route.query);
  }
}
</script>

在上面的示例中,我们在组件模板中使用了$route对象来显示当前路由的路径、参数和查询字符串。在mounted钩子中,我们通过$route.params$route.query来访问和打印路由的参数和查询字符串。

所以,可以说router用于整个应用的路由管理,而route是当前激活路由的对象,用于访问和操作当前路由的信息。

相关推荐
eternalless几秒前
【原创】中后台前端架构思路 - 低代码(2)
前端·架构
yinuo12 分钟前
彻底弄清URI、URL、URN的关系
前端
新酱爱学习16 分钟前
🚀 Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·字体
dreams_dream28 分钟前
vue布局
前端·javascript·vue.js
Tony Peakman30 分钟前
dagger.js 实现「CSS 机械键盘」示例解读(对比 React 版本)
javascript·css·react.js·前端框架
专注VB编程开发20年30 分钟前
数据库提速-在 VB6 中使用 Claude Code 进行 DAO 到 ADO 迁移,Access转SQL SERVER
前端·数据库·ui·sql server·access
何双新31 分钟前
odoo打印新解
javascript·css·html
前端小巷子34 分钟前
从双端到快速:Vue 3 Diff 的进化之路
前端·vue.js·面试
玲小珑39 分钟前
LangChain.js 完全开发手册(三)Memory 系统与对话状态管理
前端·langchain·ai编程
pengzhuofan1 小时前
项目一系列-第7章 父子组件通信
前端·javascript·vue.js