vue-cli配置静态路由(vue-router)

分三部完成

涉及文件:router目录下index.js和staticRouter.js,以及入口文件main.js

一: staticRouters.js中代码如下:
为了方便管理,静态路由的配置在单独文件管理

// 引入组件写法一:
const index =() =>{ return import ( './../components/index') }
// 引入组件写法二:
// const index =function() {
// 	 return import ( './../components/index')
// }
// 引入组件写法三:
// import index from './../components/index'

const staticRouters =[
    {path:'/',redirect:'/index'},
    // 引入组件写法四:
	// {path:'/index',component:() =>{return import ( './../components/index') }},
    {path:'/index',component: index}
]

export default staticRouters 

二: index.js中代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import staticRouters from './staticRouters'

const router=new VueRouter({
    routes:staticRouters
})
export default router

三: main.js中代码如下:

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

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