Javascript Vue.js路由器。在应用程序或组件中放置方法？

我创建了这个Vue.js路由器示例，以了解路由是如何工作的。我故意从CDN加载所有内容，这样无论谁看到这个，都可以立即开始学习，而不必学习如何导入依赖项等等

我的问题是，我应该将基于该路由的路由参数从JSON API获取数据的方法放在哪里？在应用程序中，还是在组件中

如果我的问题看起来很幼稚，请原谅。我想我快到了

运行代码段，然后单击完整页面以更好地查看

简单的Vue.js路由器示例 正文{ 字体系列：“Roboto Mono”，monospace； 字体大小：400； 字号：1rem； 背景色：E0； } .主动{ 颜色：f44336； } 标题 静态标题文本

/ /使用者 /用户/123 /职位 /员额/456 /未保存的更改 /未知路线/789 *转发至路由/404 主要的 静态主文本

页脚 静态页脚文本

//禁用 Vue.config.productionTip=false； //禁用 Vue.config.devtools=false； //组件0 常量组件0={ 模板： ` 组件0 成功：路线/ 结果：渲染组件。 ` } //组成部分1 常量组件1={ 模板： ` 组成部分1 成功：路由/用户 结果：渲染组件。 ` } //构成部分2 常量组件2={ 模板： ` 构成部分2 成功：route/users/{{$route.params.id} 结果：渲染组件。 ` } //构成部分3 常量组件3={ 模板： ` 构成部分3 成功：路线/岗位 结果：渲染组件。 ` } //构成部分4 常量组件4={ 模板： ` 构成部分4 成功：route/posts/{{$route.params.id} 结果：渲染组件。 ` } //构成部分5 常量组件5={ 模板： ` 构成部分5 成功：路由/未保存的更改 结果：渲染组件。 *如果您离开此路线，下面键入的所有文本都将丢失。 `, //仅在成分上。。。 在往返于，从，下一个之前{ const answer=window。确认“确实要离开此路由吗？有未保存的更改！” 如果回答{ 下一个 }否则{ nextfalse } } } //构成部分6 常量组件6={ 模板： ` 构成部分6 错误：未知路由。 措施：转发至route/404。 结果：渲染组件。 ` } //在此路径中，我将渲染这些组件。。 常量路由器=新的VueRouter{ 模式：“哈希”， linkExactActiveClass:活动， 路线：[ //路线0 {路径：'/'， //要按顺序渲染的组件 组成部分：{ //一个或多个。。。 routerView0:Component0， } }，//结束路由0 //一号干线 {路径：'/users'， //要渲染的组件 组成部分：{ //一个或多个。。。 routerView1：组件1， } }，//结束路线1 //路线1.1 {path:'/users/:id'， //要渲染的组件 组成部分：{ //一个或多个。。。 routerView2：组件2， }, //访问此路线时报告 beforeEnter:to、from、next=>{ // ... 控制台。警告“路线更改” 日志'ROUTE'，'FROM:'，'FROM.path'，'TO:'，TO.path； 下一个 } }，//结束路线1.1 //二号干线 { 路径：'/posts'， 组成部分：{ //一个或多个。。。 routerView3：组件3， } }，//结束路线2 //路线2.1 { 路径：'/posts/：id'， 组成部分：{ //一个或多个。。。 routerView4：组件4， }，//结束路线2.1 //访问此路线时报告 beforeEnter:to、from、next=>{ // ... 控制台。警告“路线更改” 日志'ROUTE'，'FROM:'，'FROM.path'，'TO:'，TO.path； 下一个 } }, //路由未保存的更改 { 路径：“/未保存的更改”， 组成部分：{ //一个或多个。。。 routerView5：组件5， } }，//结束路由未保存的更改 //重定向！ { 路径：'*'，重定向：'/404'， //捕获任何未定义的路由并。。。 //转发到/404路由 }, //路由未定义-自定义页面 { 路径：'/404'， 组成部分：{ //一个或多个。。。 routerView6：组件6， } }，//未定义结束路由 ] }; //观察每一条参观的路线 /* router.beforeachto，from，next=>{ // ... 控制台信息“全球路由观察者” 日志'ROUTE'，'FROM:'，'FROM.path'，'TO:'，TO.path； 下一个 }; */ const App=新的Vue{ el:“应用程序”， 路由器， 数据：{ }, }

---

我个人在组件内部进行获取，如果希望在获取数据之前渲染组件并添加加载动画，可以在created或beforeCreate钩子上获取数据，或者可以在组件上使用beforeRouteEnter或beforeRouteUpdate钩子

我的逻辑如下：如果你从组件中获取数据，只需向它们传递一个新的route param，它们就更容易测试，你可以避免在应用组件上执行一些复杂的逻辑，因为它不必跟踪选择的路由并相应地采取行动

看一看