路由挂载在vue上发生了什么

在Vue中，路由是由vue-router库来实现的。当我们将路由挂载到Vue实例上时，实际上发生了以下几个步骤：

1. 引入vue-router库：首先，我们需要在项目中引入vue-router库。可以通过npm安装，并在Vue项目的入口文件中导入：

import VueRouter from "vue-router";

2. 创建路由实例：接下来，我们需要创建一个路由实例。这个实例将作为Vue应用的一部分，用于管理页面之间的跳转。在创建实例时，我们需要定义路由的配置项，包括页面的路径和对应的组件：

const router = new VueRouter({
  routes: [
    { path: "/", component: Home },
    { path: "/about", component: About },
    // other routes
  ]
});

3. 挂载路由实例：创建好路由实例后，我们需要将其挂载到Vue实例上。这样，所有的页面跳转都会经过该路由实例进行管理。在挂载时，可以选择将路由实例作为Vue实例的一个选项传入，或者通过Vue.prototype.$router进行全局访问：

new Vue({
  // other options
  router  // 将路由实例作为Vue实例的选项
}).$mount("#app");

4. 在组件中使用路由：当路由实例挂载完毕后，我们可以在组件中使用路由进行页面跳转。通过组件和组件，我们可以实现页面的导航和展示：

<!-- 在模板中使用<router-link>实现页面导航 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

<!-- 在模板中使用<router-view>展示当前路由对应的组件 -->
<router-view></router-view>

总结：当我们将路由挂载在Vue上时，实际上是通过vue-router库来创建一个路由实例，并将该实例作为Vue应用的一部分进行管理。通过在组件中使用和，我们可以实现页面的导航和展示。

当路由挂载在Vue上时，发生了以下几个步骤：

1. 引入Vue Router库：首先，在项目中引入Vue Router库。可以通过npm安装Vue Router，然后在项目中引入和注册。

2. 创建Vue Router实例：在Vue应用中，需要创建一个Vue Router实例，该实例将用于管理路由。可以使用Vue Router提供的VueRouter构造函数来创建实例。

3. 配置路由映射：在创建Vue Router实例后，需要配置路由映射。路由映射定义了URL路径和对应的组件之间的关系。可以使用Vue Router实例的routes属性来配置路由映射，每条路由映射都包含一个URL路径和对应的组件。

4. 注册路由实例：在配置完路由映射后，需要将Vue Router实例注册到Vue应用中。可以使用Vue实例的use方法将Vue Router实例作为插件进行注册。

5. 将路由映射到Vue应用中的组件：在将Vue Router实例注册到Vue应用之后，需要将路由映射到Vue应用中的组件。可以使用Vue组件的router-view标签将路由映射到具体的组件中。该标签会根据当前URL路径显示对应的组件内容。

总的来说，当路由挂载在Vue上时，需要引入Vue Router库，创建Vue Router实例，配置路由映射，注册路由实例，然后将路由映射到Vue应用中的组件上。这样就可以实现页面的路由跳转和动态加载组件。

当我们在Vue项目中使用路由时，我们需要将路由的配置信息挂载到Vue实例上。路由挂载的过程中，主要发生了以下几个步骤：

1. 安装路由插件：在使用Vue路由之前，我们需要先安装Vue Router插件。可以通过npm或yarn等包管理工具进行安装。

2. 创建路由配置文件：在项目的根目录下，我们需要创建一个名为router.js的文件，用于配置路由。

3. 导入Vue和Vue Router：在router.js文件中，首先需要导入Vue和Vue Router插件。

4. 创建路由实例：接下来，我们需要创建一个Vue Router实例，并将其实例化。我们可以在router.js文件中使用new VueRouter()方式来创建实例，并将其导出。

5. 配置路由：在路由实例创建之后，我们需要配置路由。配置路由主要通过routes选项，该选项用于指定路由的映射关系。每个映射关系由一个对象表示，包含path和component属性，分别表示的是路由的路径和对应的组件。

6. 将路由实例挂载到Vue实例上：在main.js文件中，我们需要将路由实例挂载到Vue实例上。首先，我们需要导入路由实例，然后在创建Vue实例之前，使用Vue.use()方法将路由实例作为插件安装。

7. 使用路由：当完成以上步骤后，我们就可以在Vue项目中使用路由了。我们可以在组件模板中使用<router-link>组件指定链接，通过路由实现页面之间的跳转。同时，我们也可以在组件中使用this.$router来访问路由实例，调用其提供的方法实现编程式导航。

总结一下，路由挂载在Vue上主要包含安装路由插件、创建路由实例、配置路由和将路由实例挂载到Vue实例上等步骤。通过这些步骤，我们可以在Vue项目中使用路由，实现页面间的跳转和导航。