vue路由在什么时候加载

Vue路由在页面加载的时候进行加载。

在使用Vue框架开发单页面应用时，通常会使用Vue的路由管理插件（Vue Router）来实现页面的切换和路由跳转。在Vue中，路由的加载是在页面加载的时候自动进行的。

具体来说，当浏览器加载Vue单页面应用时，会先加载根组件（通常是App.vue），然后在该组件的模板中定义一个标签。这个标签的作用是用于根据当前路由的路径动态渲染对应的组件。

而Vue路由插件会在Vue的实例化过程中自动注册路由规则，在页面加载时，会根据当前的URL路径匹配对应的路由规则，然后渲染对应的组件。

例如，访问URL为"/home"，Vue路由会根据当前URL的路径"/home"，匹配到对应的路由规则，然后加载对应的组件并渲染到标签中显示。

总结起来，Vue路由的加载是在页面加载的时候自动进行的，通过匹配URL路径实现动态渲染不同的组件，从而实现页面的切换和路由跳转。

Vue路由是在应用加载时就会进行初始化和注册的。具体来说，Vue路由是通过Vue Router插件来实现的。

加载和初始化Vue路由的步骤如下：

1. 安装Vue Router插件：在使用Vue项目时，需要先安装Vue Router插件。可以通过npm或yarn等包管理工具进行安装。

2. 创建路由实例：在项目的根目录下，创建一个新的js文件，例如router.js，然后在该文件中引入Vue和Vue Router插件，并创建一个路由实例。

3. 配置路由：在路由实例中进行路由的配置。可以设置每个路由对应的组件、路径、名字等信息，并且可以设置路由的嵌套和重定向等。

4. 注册路由：在Vue实例中注册路由。在Vue的配置选项中，将创建的路由实例作为参数传递给Vue Router插件的router选项。

5. 启动应用：在Vue实例中调用$mount方法，将应用挂载到指定的HTML元素上。

在Vue应用加载时，Vue Router会自动根据路由配置进行初始化。当用户访问不同的路径时，Vue Router会根据路径配置的组件信息，动态地加载和渲染对应的组件。

需要注意的是，Vue路由的加载是在客户端进行的，而不是在服务端。当用户在浏览器中输入URL并访问时，首先会加载应用的入口文件，然后按照路由配置的路径来加载对应的组件。这样可以实现页面的按需加载，提高应用的性能和用户体验。
因此，在使用Vue开发中，可以根据项目的需求和特点来合理配置和利用Vue路由，以实现不同页面间的切换和跳转。

Vue 路由是在初始化 Vue 实例的时候进行加载的。具体来说，当创建 Vue 实例时，会通过在 new Vue 的配置中传入 router 对象来将路由加载到 Vue 实例中。

路由的加载过程可以分为以下几个步骤：

1. 引入 Vue Router 模块：首先，在项目的入口文件（通常是 main.js）中，需要引入 Vue Router 模块。可以使用 import 语句将 Vue Router 模块导入到文件中。

2. 创建路由实例：接下来，在入口文件中创建一个路由实例。可以通过调用 VueRouter 函数创建一个新的路由实例，并将需要的路由配置作为参数传入。

import VueRouter from 'vue-router'

// 创建路由实例
const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

3. 将路由实例注入到 Vue 实例中：在创建 Vue 实例之前，需要将路由实例注入到 Vue 实例中，以便将路由配置应用到整个应用程序中。

import Vue from 'vue'
import App from './App.vue'

// 将路由实例注入到 Vue 实例中
new Vue({
  router, // 注入路由实例
  render: h => h(App)
}).$mount('#app')

4. 定义路由配置：在上述示例中，routes 属性用于定义路由配置。路由配置是一个数组，可以定义多个路由对象，每个路由对象包含了路由的路径、组件以及其他可选的属性。

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  // 其他路由配置...
]

5. 在 Vue 组件中使用路由：在 Vue 组件中使用路由可以通过 <router-link> 和 <router-view> 这两个组件来实现。<router-link> 用于生成导航链接，<router-view> 用于渲染当前路由对应的组件。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>

综上所述，Vue 路由是在初始化 Vue 实例的时候加载的。通过在入口文件中引入 Vue Router 模块，创建路由实例并将其注入到 Vue 实例中，然后再定义路由配置和使用路由组件，就可以实现路由的加载和使用。