[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5,"_51":52,"_53":54,"_55":56},"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":-5,"_44":33,"_45":33,"_30":31,"_46":47,"_25":48,"_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","good","top","visit_count",3962,"2020-04-24T04:17:47.882Z","author",{"_13":14,"_22":23},"zones",[102],"tabs",[71,72,73,74,75,76],"publicConfig",{"_57":58,"_59":60,"_61":62},"apiBaseUrl","https://api.cnodejs.org","turnstileSiteKey","0x4AAAAAAD_J2wBk6UWPDHNQ","build",{"_63":64,"_65":66,"_67":68,"_69":70},"service","cnode-web","version","0.1.0","commit","c64cc2d0e405a9400d4ab4d5a5f5bfde901ee8be","buildTime","2026-08-04T18:44:14Z",{"_20":16,"_78":38,"_80":101,"_82":93,"_83":16,"_85":94},{"_20":98,"_78":99,"_80":100,"_82":93,"_83":98,"_85":94},{"_20":95,"_78":96,"_80":97,"_82":93,"_83":95,"_85":94},{"_20":91,"_78":44,"_80":92,"_82":93,"_83":91,"_85":94},{"_20":87,"_78":88,"_80":89,"_82":33,"_83":90,"_85":86},{"_20":77,"_78":79,"_80":81,"_82":33,"_83":84,"_85":86},10,"key","test","label","测试","visible","sort_order",91,"scope","admin",9,"dev","开发",90,4,"精华",true,"public",3,"job","招聘",2,"ask","问答","分享",{"_20":16,"_103":104,"_105":97,"_106":107,"_108":109,"_82":93,"_83":16},"slug","jobs","name","description","Node.js 招聘信息专区","icon","briefcase"]