安装并配置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中定义一级路由啦！下面是一些小建议：