刚创建的vue2项目路由是空白页的原因

1、创建路由

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
const routers = [
  {
    path: "/",
    redirect: "/home",
  }, //设置默认指向的路径

  {
    path: "/home",
  
    component: () => import('../pages/home.vue')
  },
  
  {
    path: "/index",
  
    component: () => import('../pages/index.vue')
  },
];

const router = new VueRouter({
//注意 ：这个 routes不能写错，就是写错这个所以 页面一直没有显示出来


  routes: routers,
});

// 导出路由
export default router;

2、在app.vue中设置路由挂载点

<template>
  <div>
    <!-- 路由挂载点 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

3、在main.js中挂载路由

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index"
Vue.config.productionTip = false

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