安装并配置Vue Router-运行-对大型应用使用路由懒加载可以加快加载速度

作者：机器人技术佬 | 发布时间：2025-07-02 |

安装并配置Vue Router

在Vue中搞路由，首先要装Vue Router插件。不管是用npm还是yarn，步骤都差不多。

使用npm安装	运行`npm install vue-router`
使用yarn安装	运行`yarn add vue-router`

安装完之后，得在项目里配置Vue Router。在主文件里（比如是main.js），得导入Vue Router并配置它。

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); // ... 配置路由 ...

这样就完成Vue Router的安装与基础配置啦！下一步就是定义具体的路由了。

创建路由配置文件

新建一个文件，通常叫router.js或index.js，来放路由配置。

在目录下创建新的文件（比如：router.js）。
在这个文件中定义你的路由配置。

 import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] });

在Vue实例中导入并使用路由

接下来，要在你的Vue实例中使用这些路由。

在文件中导入你刚才创建的路由配置文件。
将路由实例添加到Vue实例中。

 import Vue from 'vue'; import App from './App.vue'; import router from './router'; // 导入刚才创建的路由配置文件 new Vue({ router, render: h => h(App) }).$mount('#app');

定义路由组件

得在目录下创建对应的路由组件文件，然后在路由配置文件中引用这些组件。

创建两个组件文件（比如：Home.vue和About.vue）。
在router.js中引用并使用这些组件。

// Home.vue // About.vue

使用路由视图和导航

在主应用组件（比如App.vue）中使用来显示当前路由对应的组件，并用来添加导航链接。

通过这些步骤，我们就能在Vue中定义一级路由啦！下面是一些小建议：