vue 路由什么时候加载 • Worktile社区

worktile

Worktile官方账号

Vue 路由在什么时候加载？
Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架，而 Vue 路由是 Vue.js 中负责管理应用程序路由的插件。在开发 Vue.js 应用时，我们通常需要使用路由来实现页面之间的跳转和导航。

Vue 路由在 Vue.js 应用启动时会被加载。具体来说，当使用 Vue CLI 创建一个新的 Vue.js 项目时，会自动生成一个 main.js 文件。在 main.js 文件中，我们可以看到以下代码：

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

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在这段代码中，我们引入了 vue-router，并将其实例作为参数传递给 Vue 的根实例。这样，就将路由添加到了 Vue.js 应用中。在应用启动时，路由也就被加载了。

而在 router.js 文件中，我们会定义路由的配置。这包括各个路由路径对应的页面组件、路由名称、路由参数等。在 Vue.js 应用运行过程中，当用户点击链接或执行编程式导航时，Vue 路由会根据配置的路由规则进行匹配，并加载对应的页面组件。

总结来说，Vue 路由在 Vue.js 应用启动时被加载，并在应用运行过程中根据路由规则匹配加载对应的页面组件。通过使用路由，我们可以实现页面之间的跳转和导航，使用户能够方便地浏览和操作应用程序。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue 路由是在应用启动时加载的。当 Vue 应用初始化时，它会注册并加载所有定义好的路由。这样，应用在启动时就可以正确地匹配对应的路由路径，并渲染相应的组件。

具体来说，以下是 Vue 路由加载的几个时机：

在 Vue 应用初始化之前，需要先安装和注册 Vue Router。这样才能在应用中使用 <router-view> 和 <router-link> 这两个与路由相关的组件。
在 Vue 根组件中，需要使用 Vue.use() 方法来安装 Vue Router，并传入路由实例作为参数。这样 Vue 应用就可以全局访问到路由实例。
在路由实例中，需要定义路由的配置选项。这些配置包括路由路径、对应的组件以及其他可选参数。
在 Vue 实例化时，需要在 router 选项中传入路由实例，以便 Vue 知道如何寻找对应的路由。
当 Vue 应用启动时，会调用路由实例的 init 方法，以便路由能正确地匹配对应的路径，并渲染相应的组件。

总结起来，Vue 路由是在应用启动时加载的，它负责管理和解析 URL，根据配置好的路由定义，将不同的 URL 映射到不同的组件上，从而使得我们可以基于路径来构建单页应用。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue 路由在项目的初始化阶段进行加载。当浏览器访问项目的入口地址时，Vue 路由会根据配置文件中设置的路由规则，将对应的组件加载到页面中。

具体来说，Vue 路由的加载可以分为两个阶段：

路由配置阶段：在项目的根组件中，通过创建一个路由实例并配置路由规则。在 Vue 中，可以使用 Vue Router 来进行路由管理。在路由配置阶段，我们可以定义各个路由对应的组件、路由别名、路由参数、重定向等。
路由激活阶段：在路由配置阶段之后，在 Vue 实例中启用路由功能，将路由实例与根组件关联。当浏览器访问项目的入口地址时，Vue 路由会根据路由规则匹配对应的组件，并将组件加载到页面中。在页面中，可以使用 <router-view> 标签来显示当前活动路由的对应组件。

下面是详细的操作流程：

配置路由规则：在项目的根组件中，通常是 main.js 文件中，导入 Vue Router，然后创建一个路由实例。在创建路由实例时，可以通过传入一个配置对象来定义路由规则。常见的配置包括 routes，用于定义路由规则的数组，以及 mode，用于指定路由模式（hash 模式或者 history 模式）。

例如：
```
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

const router = new VueRouter({
  routes,
  mode: 'history'
})
```

启用路由功能：在根组件中，通常是 main.js 文件中，在创建 Vue 实例之前，使用 Vue.use() 方法来启用路由功能，并将路由实例作为参数传入。

例如：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from './router'

Vue.use(VueRouter)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在页面中显示路由组件：在根组件的模板中，通过使用 <router-view> 标签来显示当前活动路由的组件。当浏览器访问对应的路由路径时，该路径对应的组件将会被加载到该标签所在的位置。

例如：
```
<template>
  <div id="app">
    ...
    <router-view></router-view>
    ...
  </div>
</template>
```

通过上述的操作，Vue 路由将会在项目初始化阶段加载，并负责根据浏览器地址的变化，动态地加载对应的组件到页面中。

2年前 0条评论