vue-router在项目中的使用（路由懒加载）

第一步： npm install vue-router -S

注意:vue2版本的项目最高支持vue-router@3。

第二步： 新建文件src/router/index.js

第三步：在router/index.js中导入vue和vue-router,注册使用路由，创建路由对象配置组件和路由的映射关系并且导出.

import Vue from 'vue'
import vueRouter from 'vue-router' //导入路由
// import HomeView from '@/views/HomeView.vue'

Vue.use(vueRouter) //使用路由

//创建路由对象
export default new vueRouter({
    // 配置组件和路由的映射关系
    routes: [{
        path: '/',
        name: 'Home',
        component: () => import('@/views/HomeView.vue') //路由懒加载
    }]
})

第四步：在main.js中引入路由对象，并在vue中使用

import Vue from 'vue'
import App from './App.vue'
import router from '@/router' //引入路由对象

Vue.config.productionTip = false

new Vue({
  router, //vue中使用路由对象
  render: h => h(App),
}).$mount('#app')

第五步：使用标签使用路由。