【Vue】路由的封装抽离

本文主要是介绍【Vue】路由的封装抽离，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题：所有的路由配置都在main.js中合适吗？

目标：将路由模块抽离出来。 好处：拆分模块，利于维护

路径简写：

脚手架环境下 @指代src目录，可以用于快速引入组件

---

完整代码

router/index.js

// 但是这里就遇到了一个麻烦，复制粘贴过来后，相对路径就需要改，如果层级比较深就更麻烦了，此时我们就可以使用绝对路径，在Vue中它允许你使用@标识符来代表绝对路径，@代表的是当前的src目录，将来直接基于 @ 指代src目录，从src目录出发找组件
// import Find from '../views/Find'
import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'// 注意别忘记导Vue，因为下面用到了
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({// routes 路由规则们// route  一条路由规则 { path: 路径, component: 组件 }routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
})// 进行导出
export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

这篇关于【Vue】路由的封装抽离的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---