vue动态路由

应用场景

1.gif
动态路由即动态组件，路由和组件都是固定的变化的只是 路由的params
该应用场景下每当点击一个病人需要在头部导航中追加一个router-link 并将url切换到对应的path上

router.js

首先在router.js中需要注册该动态路由和其参数

{
          path : '/workstation/patientDOC/:id',
          name : 'patientDOC',
          component : PatientDOC
}

component

做好上一步后，我们发现在切换组件的时候内部的数据并没有发生变化，因为 数据的请求是写在 mounted 钩子中的，所以只会在第一次加载组件的时候执行请求操作。
那么要怎样做呢，最直接的想法是 我在点击病人时去 调用 组件的axios请求来实现 组件更新，但是头部导航在切换的时候也需要更新数据这时候就需要watch这个API了

 '$route.params.id' : function (to) {
            console.log(to)
            //axios请求
 }

注意监听要放在 病人详情的组件中，这样只有在/workstation/patientDOC这个路由上才会监听id的变化

优化

完成上述部分还有很多需要优化的部分

例如：每次切换病人都会 触发请求 造成了资源的浪费
例如：刷新页面的时候 因为路由都是点击病人动态创建的所以一刷新 头部导航就全部不见了，但是页面还是当前路由

这时候就需要vuex 和 sessionStronge配合来完成了
用sessionStronge来保存router-link需要的数据即头部导航 然后在病人卡片页面 初次加载的生命周期里从sessionStronge中取值，在点击病人的时候需要给sessionstronge重新赋值

vuex存取页面数据的操作与sessionStronge相同，但在监听的写法上会有略微不同。因为监听到 parmes.id变化时需要判断vuex中是否有该组件需要的数据没有的话再去调用axios并更新vuex