路由封装
在router中创建两个文件 config.js和homeMoudule.js
1、在config.js中写入配置路径并抛出
import Home from '../views/Home.vue'
const router = {
home:{
path: '/',
name: 'Home',
component: Home
},
about:{
path:"/about",
name:"About",
component:() => import('../views/About.vue')
},
demon:{
path:"/demon",
name:"demon",
component:() => import('../views/Demon.vue')
}
}
export default router;
2、在homeModule中引用
import router from “./config”;
const homeMoudule = [
router.home,
router.about,
router.demon
]
export default homeMoudule
3、在index.js中引入homeModule.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import homeModule from "./homeModule"
Vue.use(VueRouter)
const routes = [
...homeModule
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
4、在main.js中配置config.js
import routerConfig from './router/config';
Vue.prototype.$routerConfig = routerConfig;
5、在home 中使用
<template>
<div>
<button @click="onClick">点击</button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
onClick(){
this.$router.push(this.$routerConfig.about.path)
}
},
}
</script>
<style>
</style>