基于VueCli的常规路由插件

参考umi的常规路由插件环境VueCLI3.1.0VueRouter3.02功能介绍做了一个简单的vue常规路由插件环境假设pages目录结构如下：+pages/+$folder/-page.vue-_layout.vue-index.vue然后插件会自动生成路由配置如下：functionIndex(){returnimport(/*webpackChunkName:"page-index"*/'@/pages/index.vue')}functionFolderLayout(){returnimport(/*webpackChunkName:"page-$folder-layout"*/'@/pages/$folder/_layout.vue')}functionFolderPage(){returnimport(/*webpackChunkName:"page-$folder-page"*/'@/pages/$folder/page.vue')}exportdefault[{path:'/',redirect:'/index'},{名称:'index',path:'/index',component:Index},{name:'$folder-layout',path:'/:folder/layout',component:FolderLayout,children:[{name:'$folder-page'，路径：'page'，组件：FolderPage}]}]installation并使用vueaddeasy-routing在main.js中引入生成的路由，并使用importrouterfrom'./router'···············newVue({router,render:h=>h(App)}).$mount('#app')在App.vue中添加<router-view/>如果没有安装vue-router，需要安装npminstallvue-router最后启动项目npmrunserve在src/pages中添加一个新的页面newPage.vue，在里面写上相关代码并保存，然后保存在已有的页面上。编译完成后，在浏览器中输入http://localhost:8080/newPage，就会出现相关的页面配置。安装vue-cli-plugin-easy-routing后，在vue.config文件中会生成如下配置项pluginOptions：{easyRouting:{pages:'src/pages',chunkNamePrefix:'page-',redirectPath:'index'}}pages这个配置项主要用来生成路由地址，默认是src/pageschunkNamePrefix这个配置项用来设置默认的打包前缀名redirectPath这个配置项用来设置默认的redireweight定向路由注意：如果未设置，则默认为/index。如果设置了嵌套路由的布局，需要在这里设置重定向路由。动态路由匹配我们经常需要将匹配某种模式的所有路由映射到同一个组件，比如我们有一个User组件，用来渲染所有不同ID的用户。那么，我们可以在vue-router的路由路径中使用“动态分段”来实现这个效果：constUser={template:'

'}constrouter=newVueRouter({routes:[{path:'/user/:id',component:User}]})为了生成上面的路由并使用动态路由功能，我们约定：在页面前缀中使用$表示该页面为动态路由├─pages│about.vue│index.vue│└─dynamic$dynamic.vue生成的路由为：······functionDynamicDynamic(){returnimport(/*webpackChunkName:"page-dynamic-dynamic"*/'@/pages/dynamic/$dynamic.vue')·····}exportdefault[·····{name:'dynamic-dynamic',path:'dynamic/:dynamic',component:DynamicDynamic}·····]不生成路由有些页面不需要生成路由。对于这种情况，我们同意：使用$作为后缀表示页面不需要生成路由├─pages│about.vue│index.vue│noroute$.vue│└─dynamic$dynamic.vue包含的路由路由元素在.vue页面的自定义模块中写入对应的json{"str":"str","number":113,"boolean":true,"array":["array"]}生成的路由：{name:'hasMeta',path:'hasMeta',component:HasMeta,meta:{str:'str',number:113,boolean:true,array:['array']}}，嵌套路由在实际项目中经常用到嵌套路由的功能，所以我们约定：在页面前缀中使用_表示页面为布局，可以嵌套多层路由├─pages│about.vue│index.vue│_layout_.vue└─folder_layout.vuepage.vue生成的路由：functionFolderLayout(){returnimport(/*webpackChunkName:"page-folder-layout"*/'@/pages/folder/_layout.vue')}functionFolderPage(){returnimport(/*webpackChunkName:"page-folder-page"*/'@/pages/folder/page.vue')exportdefault[·····{name:'folder-layout',path:'folder/layout',component:FolderLayout,children:[{name:'folder-page',path:'page',component:FolderPage}]}·····]git地址VUE-CLI-PLUGIN-EASY-ROUTING相关项目easy-route