Vue router 与 route 的区别

在 Vue Router 中，router 和 route 是两个不同的概念，它们各自具有不同的作用和功能。

	router	route
定义	负责管理应用程序中的多个路由（route），并提供导航功能	当前激活的路由的状态信息对象
功能	- 定义路由 - 监听URL变化并渲染对应组件 - 支持嵌套路由 - 解析URL参数和查询字符串 - 提供导航守卫（Guards） - 滚动管理	- 定义URL路径与组件的映射 - 提供参数和查询字符串的解析
注意	路由器（router）是全局的，负责整个应用程序的路由管理	路由（route）是局部的，定义了特定URL路径与组件的映射关系

---

router （路由实例）

• router 是 Vue Router 的实例，它是整个路由系统的核心。

• router 负责管理应用程序中的多个路由（route）的映射关系，即URL路径与组件之间的对应关系，以此提供导航功能

它提供了多种方法，如 push、replace 等，用于在应用程序中导航到不同的路由。

router 还包含了一些全局的路由钩子函数，如 beforeEach、beforeResolve 和 afterEach，这些钩子函数可以在路由改变之前或之后执行特定的逻辑，例如权限检查、数据预取等。

使用router进行导航：

// 引入Vue和VueRouter  
import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
// 告诉Vue使用VueRouter插件  
Vue.use(VueRouter);  
  
// 定义路由组件  
const Home = { template: '<div>Home</div>' };  
const About = { template: '<div>About</div>' };  
  
// 创建router实例  
const router = new VueRouter({  
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About },  
  ],  
});  
  
// 创建Vue实例并挂载到页面上  
new Vue({  
  router, // 注入router实例到Vue根实例中  
}).$mount('#app');

---

route （路由对象）

• route 则代表当前激活的路由状态信息对象。

• 它是一个包含了当前URL解析得到的信息的对象。 例如：

  1. $route.path：对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"
  2. $route.params：一个包含动态片段和星号片段的键值对的对象。
  3. $route.query：一个包含查询参数的对象。

• route对象还包含了一些如路由名称、路由参数等元信息。
  在组件内部，可以通过 this.$route 来访问当前路由对象，以便获取当前路由的状态信息或监听路由变化。

在组件内部访问 route 对象：

<template>  
  <div>  
    <h1>{{ $route.path }}</h1>  
    <p v-if="$route.params.id">User ID: {{ $route.params.id }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'UserComponent',  
  mounted() {  
    console.log(this.$route); // 输出当前路由对象  
    // 监听路由变化  
    this.$route.watch((to, from) => {  
      console.log('路由发生了变化', to, from);  
    });  
  },  
};  
</script>