分三部完成
涉及文件: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')