vue 封装路由(二次封装)

当开发中路由越来越多的情况下;我们如果每个name和path都需要自己手动去写的话就会浪费不少时间;下面封装一个自动生成的name和path的方法;并且对components中共有的内容也进行提取这样会方便很多

router.js

import Vue from 'vue'
import Router from 'vue-router'
//引入封装好的路由路径
import routes from './common/config/router'
// 实例化
Vue.use(Router)
export default new Router({
    routes,
})

main.js中引入路由

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
//引入路由
import router from './router'

Vue.config.productionTip = false
//挂载
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在common下新建文件和放路由的js文件

common/config/router.js

/**
 * 路由二次封装,
 * 规则是每个vue都要对应的文件夹下面
 * 对以Index结尾的文件会自动去除index
 * 对没有name和path的地方自动生成name和path,
 * 生成的name 如果有/会用_代替 如layout/layout 会生成

最后

以上就是迷人早晨为你收集整理的vue 封装路由(二次封装)的全部内容，希望文章能够帮你解决vue 封装路由(二次封装)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。