[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5,"_51":52},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","2heal1","page",1,"limit",20,"total","id","39706","avatar_url","https://avatars0.githubusercontent.com/u/41466093?v=4","githubUsername","create_at","2020-04-24T04:16:44.280Z","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":31,"_47":48,"_25":44,"_49":50},"43015","author_id","tab","share","content","参考umi的约定式路由做了个简单的vue约定式路由插件\r\n\r\n## 环境\r\n- Vue CLI `3.1.0`\r\n- VueRouter `3.02`\r\n## 功能简介\r\n假设 `pages` 目录结构如下：\r\n```js\r\n+ pages/\r\n + $folder/\r\n - page.vue\r\n - _layout.vue\r\n - index.vue\r\n```\r\n那么，该插件会自动生成路由配置如下：\r\n```js\r\nfunction Index() {\r\n return import(/* webpackChunkName: \"page-index\" */ '@/pages/index.vue')\r\n}\r\nfunction FolderLayout() {\r\n return import(\r\n /* webpackChunkName: \"page-$folder-layout\" */ '@/pages/$folder/_layout.vue'\r\n )\r\n}\r\nfunction FolderPage() {\r\n return import(\r\n /* webpackChunkName: \"page-$folder-page\" */ '@/pages/$folder/page.vue'\r\n )\r\n}\r\nexport default [\r\n {\r\n path: '/',\r\n redirect: '/index'\r\n },\r\n {\r\n name: 'index',\r\n path: '/index',\r\n component: Index\r\n },\r\n {\r\n name: '$folder-layout',\r\n path: '/:folder/layout',\r\n component: FolderLayout,\r\n\r\n children: [{ name: '$folder-page', path: 'page', component: FolderPage }]\r\n }\r\n]\r\n```\r\n## 安装及其使用\r\n\r\n```js\r\nvue add easy-routing\r\n```\r\n在`main.js`中引入生成的路由，并使用\r\n```js\r\nimport router from './router'\r\n··············\r\nnew Vue({\r\n router,\r\n render: h => h(App)\r\n}).$mount('#app')\r\n```\r\n在`App.vue`中加入``\r\n```js\r\n\r\n```\r\n如果没有安装过vue-router，需要进行安装`npm install vue-router`\r\n最后启动项目\r\n```js\r\nnpm run serve\r\n```\r\n- 在`src/pages`中添加一个新的页面`newPage.vue`,并在其中写上相关代码\r\n- 保存后，再在已有的页面上保存，编译后在浏览器中输入`http://localhost:8080/newPage`，便可出现相关页面\r\n\r\n## 配置\r\n安装`vue-cli-plugin-easy-routing`后，会在`vue.config`文件里生成以下配置项\r\n```js\r\npluginOptions: {\r\n easyRouting: {\r\n pages: 'src/pages',\r\n chunkNamePrefix: 'page-',\r\n redirectPath: 'index'\r\n }\r\n}\r\n```\r\n### pages\r\n该配置项主要是用来生成路由的地址，默认为`src/pages`\r\n\r\n### chunkNamePrefix\r\n该配置项用来设置默认打包前缀名\r\n\r\n### redirectPath\r\n该配置项用来设置默认的redire重定向的路由 \r\n**注意:** 如若不设置，则默认为/index，如果设置了嵌套路由的布局，需要在此设置重定向路由\r\n\r\n## 动态路由匹配\r\n我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:\r\n```js\r\nconst User = {\r\n template: '

User

'\r\n}\r\n\r\nconst router = new VueRouter({\r\n routes: [\r\n { path: '/user/:id', component: User }\r\n ]\r\n})\r\n```\r\n为能生成以上路由，使用到动态路由功能，我们约定:\r\n- 在页面**前缀**使用`$`代表该页面为动态路由\r\n```js\r\n ├─pages\r\n │ about.vue\r\n │ index.vue\r\n │\r\n └─dynamic\r\n $dynamic.vue \r\n```\r\n生成的路由就为:\r\n```js\r\n·····\r\nfunction DynamicDynamic() {\r\n return import(\r\n /* webpackChunkName: \"page-dynamic-dynamic\" */ '@/pages/dynamic/$dynamic.vue'\r\n )\r\n ·····\r\n}\r\n\r\nexport default [\r\n ·····\r\n {\r\n name: 'dynamic-dynamic',\r\n path: 'dynamic/:dynamic',\r\n component: DynamicDynamic\r\n }\r\n ·····\r\n]\r\n\r\n```\r\n## 不生成路由\r\n有些页面不需要有路由生成，为了这种情况，我们约定:\r\n- 采用`$`为**后缀**代表该页面不需要生成路由\r\n```js\r\n ├─pages\r\n │ about.vue\r\n │ index.vue\r\n │ noroute$.vue \r\n │\r\n └─dynamic\r\n $dynamic.vue \r\n \r\n\r\n```\r\n\r\n## 含有路由元的路由\r\n- 在`.vue`页面内``自定义模块内写相应的json\r\n\r\n```js\r\n\r\n{\r\n \"str\":\"str\",\r\n \"number\":113,\r\n \"boolean\":true,\r\n \"array\":[\"array\"]\r\n}\r\n\r\n```\r\n生成的路由:\r\n```js\r\n {\r\n name: 'hasMeta',\r\n path: 'hasMeta',\r\n component: HasMeta,\r\n meta: { str: 'str', number: 113, boolean: true, array: ['array'] }\r\n },\r\n```\r\n\r\n## 嵌套路由\r\n在实际项目中我们经常是要用到嵌套路由的功能，因此我们约定:\r\n- 在页面**前缀**使用`_`代表该页面为布局\r\n- 可以嵌套多层路由\r\n```js\r\n ├─pages\r\n │ about.vue\r\n │ index.vue\r\n │ _layout_.vue \r\n └─folder\r\n _layout.vue \r\n page.vue\r\n```\r\n生成的路由:\r\n```js\r\nfunction FolderLayout() {\r\n return import(\r\n /* webpackChunkName: \"page-folder-layout\" */ '@/pages/folder/_layout.vue'\r\n )\r\n}\r\nfunction FolderPage() {\r\n return import(\r\n /* webpackChunkName: \"page-folder-page\" */ '@/pages/folder/page.vue'\r\n )\r\nexport default [ \r\n ·····\r\n {\r\n name: 'folder-layout',\r\n path: 'folder/layout',\r\n component: FolderLayout,\r\n children: [{ name: 'folder-page', path: 'page', component: FolderPage }]\r\n }\r\n ·····\r\n]\r\n```\r\n## git地址\r\n- [VUE-CLI-PLUGIN-EASY-ROUTING](https://github.com/2heal1/vue-cli-plugin-easy-routing)\r\n## 相关工程\r\n- [easy-route](https://github.com/2heal1/easy-route)","title","基于VueCli的约定式路由插件","last_reply_at","2020-04-24T04:17:47.882Z","good","top","visit_count",3962,"author",{"_13":14,"_22":23},"publicConfig",{"_53":54,"_55":56,"_57":58},"apiBaseUrl","https://api.cnodejs.org","turnstileSiteKey","","build",{"_59":60,"_61":62,"_63":64,"_65":66},"service","cnode-web","version","0.1.0","commit","76f44e344043bc5cc53bcc8458e5c43a2b1f7914","buildTime","2026-07-28T00:42:19Z"]