vue路由点击切换发生了什么

在Vue.js中，通过路由实现页面之间的切换是一个常见的需求。当我们点击路由链接时，会发生以下几个步骤：

1. 路由定义：首先，需要定义路由。在Vue.js中，可以使用Vue Router来定义路由。通过Vue Router，我们可以定义多个路由，并将它们与对应的组件进行关联。

2. 路由注册：在Vue实例化之前，需要将路由注册到Vue实例中。注册路由可以使用Vue Router提供的Vue.use()方法。

3. 路由跳转：当点击某个路由链接时，会触发路由跳转。这可以通过使用<router-link>组件进行跳转，也可以在JavaScript代码中使用router.push()方法进行跳转。

4. 状态改变：路由跳转之后，会改变路由的状态。在Vue Router中，可以通过$route对象来获取当前路由的信息，比如路由的路径、参数等。

5. 组件渲染：根据路由的路径，Vue Router会根据路由的配置信息找到对应的组件，并将该组件渲染到页面中。在Vue中，可以使用<router-view>组件来展示当前路由对应的组件。

总结一下，当点击路由链接时，Vue Router会根据路由的配置信息进行路由跳转，并根据路由的路径渲染对应的组件。路由的跳转和组件的渲染都是在前端实现的，不需要重新加载整个页面，提供了更好的用户体验。

当使用Vue.js进行路由点击切换时，发生了以下几点：

1. URL的改变：点击切换路由时，浏览器会检测到URL的改变。Vue.js使用了HTML5的History API，通过pushState()方法改变URL，不会进行页面的重新加载。这样做的好处是可以实现无刷新页面切换。

2. 路由表的匹配：在Vue.js中，通过路由表来定义不同URL路径对应的组件。当URL发生变化时，Vue.js会根据路由表进行匹配，找到对应的组件。

3. 组件的加载：一旦找到匹配的组件，Vue.js会加载该组件，并将其渲染到路由的出口位置。这可以通过标签来实现。组件的加载是异步进行的，所以加载时间可能会有一些延迟。

4. 数据的获取和更新：在路由的切换过程中，你可能需要获取不同页面的不同数据。可以利用Vue.js提供的生命周期钩子函数来在组件加载前后进行数据的获取和更新。

5. 页面的渲染：一旦组件加载完成并且数据也获取到了，Vue.js会将组件的模板渲染到浏览器中的指定位置。这样，用户就能够看到切换后的页面内容了。

总之，在Vue.js中，通过路由的点击切换，实现了无刷新页面的加载和切换。这样可以提升用户体验，使页面切换更加流畅。

在Vue中使用路由进行页面切换时，主要有以下几个步骤：

1. 定义路由：在Vue中通过Vue Router来定义路由。首先需要安装Vue Router插件，然后在项目入口文件（如main.js）中引入Vue Router并使用。

2. 创建路由实例：在路由配置中，需要创建一个路由实例，用来管理路由配置。可以通过new VueRouter()来创建一个路由实例。

3. 配置路由映射关系：在路由实例中，可以配置路由的映射关系。通过调用router.map()方法或router.addRoutes()方法，在其中配置具体的路由映射关系。每个路由映射关系都由一个路径（path）和组件（component）构成。

4. 注入路由：在Vue实例中，需要将路由实例注入到Vue中，以实现路由的功能。通过将路由实例作为Vue实例的一个选项传入，即可完成注入。

5. 使用组件：在Vue的模板中，可以使用<router-view>标签来显示当前路由对应的组件。当路由切换时，路由对应的组件会根据路径的变化进行更新。

6. 触发路由切换：在应用程序中，可以通过代码或者用户交互来触发路由的切换。当切换发生时，Vue Router会根据当前路由的路径匹配对应的组件，并将其渲染到<router-view>中。

7. 路由跳转：Vue Router提供了一些方法来实现路由的跳转。可以通过<router-link>组件来实现路由的跳转，也可以通过$router.push()方法或$router.replace()方法来进行编程式的路由跳转。

总结起来，当我们点击路由链接或者通过编程的方式触发路由切换时，Vue Router会根据当前的路径找到对应的组件，并将其渲染到<router-view>中，从而实现页面的切换。