Vue router 与 route 的区别

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

router （路由实例）

router是Vue Router的实例，它是整个路由系统的核心。
router负责创建和管理路由映射关系，即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>