当前位置：首页 > article >正文

Vue Router 中 router、route 和 routes 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】

article 2024/11/2 20:45:16

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
});