当开发中路由越来越多的情况下;我们如果每个name和path都需要自己手动去写的话就会浪费不少时间;下面封装一个自动生成的name和path的方法;并且对components中共有的内容也进行提取这样会方便很多
router.js
复制代码
1
2
3
4
5
6
7
8
9import Vue from 'vue' import Router from 'vue-router' //引入封装好的路由路径 import routes from './common/config/router' // 实例化 Vue.use(Router) export default new Router({ routes, })
main.js中引入路由
复制代码
1
2
3
4
5
6
7
8
9
10
11
12import 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
复制代码
1
2
3
4
5
6/** * 路由二次封装, * 规则是每个vue都要对应的文件夹下面 * 对以Index结尾的文件会自动去除index * 对没有name和path的地方自动生成name和path, * 生成的name 如果有/会用_代替 如layout/layout 会生成
最后
以上就是迷人早晨最近收集整理的关于vue 封装路由(二次封装)的全部内容，更多相关vue内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复