vue-cli3中使用vue-router

在项目中使用vue-router管理路由，分为以下几步
第一步：在终端（terminal）中安装vue-router

npm install -g vue-router

第二步：在src目录下创建一个router文件夹，在这个文件夹下创建router.js（也可以和main.js平级,直接创建router.js），在router.js文件中配置相应的信息，代码如下

import Vue from 'vue'  //引入vue
import vueRouter from 'vue-router'  //引入vue-router
import index from '@/views/index'  //引入首页的文件

Vue.use(vueRouter)


export default new vueRouter({
    routes:[
        {path:'/',name:'index',component:index}
    ]
})

第三步，在main.js中引入router.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'

Vue.config.productionTip = false

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

第四步，修改App.vue这文件，代码如下

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

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

这样就可以正常运行项目了，整个项目的目录分布如下图