heroes案例中的路由

这里以heroes案例为例：

项目整体的路由

整体思路是：main.js作为程序的入口文件，可以书写路由相关的代码，但是这样不符合单一职责原则，不利于代码的维护，因此采用另一个router.js文件管理路由，但是又需要使router.js管理的路由在main.js中发挥作用。

详细步骤：
1.公有组件appslider.vue中书写<router-view>
2.App.vue中，设置<router-view>容器
3.router.js中，导入vue和vue-router，导入前要看清楚node_modules中是否已经安装相应的包，最后Vue.use(VueRouter)。
4.router.js中，导入要渲染的组件Bar.vue、List.vue、Foo.vue
5.router.js中配置路由routes
6.router.js实例化路由：new VueRouter()
7.router.js导出router对象
8.main.js导入router.js
9.在main.js的new Vue实例的选项router中挂载路由

从英雄列表到编辑页面的路由

这里记录一种比较常见但也相对复杂的情况，即处理类似于heroes案例中的“点击不同的编辑按钮->渲染同一个组件edit.vue”的情况。
这里使用函数式导航时，push函数不仅仅需要填组件对象，还需要填第二个参数id值。

详细步骤：
1.list.vue的js部分：
methods->
showEditVue(ID){this.$router.push({name:‘edit’,params:{id:ID}})};
2.router.js中，为原路由配置添加id：
{path:’/edit/:id’}
这种写法叫作动态路由
3.edit.vue中：
获取动态路由参数this.$route.params.id
4.edit.vue中：
axios.get(url+this.\route.params.id).then((res)=>{this.formData=res.data});
5.edit.vue中：
mounted(){this.getHeroById();}
调用4所在的方法
6.将5中获取的对象数据绑定到视图中