Vue Router 中 router、route 和 routes 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】 🛤️
在Vue.js中，使用Vue Router进行页面路由管理时，router、route 和 routes 是三个非常重要且常用的概念。理解它们的区别对于有效管理路由至关重要。以下是这三者的详细对比。
1. router
定义
router是 Vue Router 的实例。它是一个全局的路由实例，负责管理整个应用的路由。
功能
- 通过
router，你可以调用诸如push()、replace()、go()等导航方法来控制路由的跳转。
使用
- 通常在 Vue 应用创建时，通过
new VueRouter({ routes })创建，并在 Vue 实例中通过router选项注入到每个组件中，使得组件内部可以通过this.$router访问路由实例。
示例代码
import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/about', component: About }]
});// 在 Vue 实例中使用 router
new Vue({router,render: h => h(App)
}).$mount('#app');
2. route
定义
route是当前激活的路由对象，包含了当前路由的详细信息，如路径、参数、查询参数等。
功能
- 你可以通过
route来获取当前路由的路径（path）、名称（name）、参数（params）、查询参数（query）等。
使用
- 在组件内部，你可以通过
this.$route来访问当前路由对象。
示例代码
export default {computed: {currentPath() {return this.$route.path; // 获取当前路由的路径},currentQuery() {return this.$route.query; // 获取当前路由的查询参数}}
};
3. routes
定义
routes是一个数组，包含了所有的路由配置信息。每个路由配置都是一个对象，定义了路由的路径（path）、组件（component）、名称（name）、子路由（children）等。
功能
routes数组定义了应用中所有可能的路由路径和对应的组件。
使用
- 在创建 Vue Router 实例时，
routes作为配置对象的routes属性传递给 Vue Router。
示例代码
const routes = [{ path: '/home', component: Home },{ path: '/about', component: About }
];const router = new VueRouter({routes // 将routes数组传递给VueRouter
});
总结 📝
区别概述
- router：全局的路由实例，负责路由的管理和跳转。
- route：当前激活的路由对象，包含当前路由的详细信息。
- routes：定义所有路由路径和对应组件的数组。
理解这三者的作用和用法，将帮助你在Vue应用中更有效地管理路由，提高开发效率。在面试中能够清晰地解释这些概念，将使你更具竞争力！希望你能顺利应对相关问题，成功上岸！