vue项目路由配置

初始化vue项目之后对路由进行配置
1、在src下创建router文件夹，router下创建index.js

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

Vue.use(VueRouter)
const routes = [
    {
        path: "/",
        component: () => import("@/views/homePage/index.vue"),
        name: "homePage",
        children: [
        ]
    },
];

const router = new VueRouter({
    routes,
});

export default router;

2、创建homepage文件

<template>
  <div>homePage</div>
</template>
<script>
export default {
  name: "homePage",
  props: {},
  data() {
    return {};
  },

  methods: {},
  mounted() {},
  created() {},
};
</script>
<style >
</style>

3、在main.js文件中引入router

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

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

4、app.vue页面引入router-view

<template>
  <div id="app">
     <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5、如果项目报错提示没安装vue-router执行以下操作

npm install vue-router