关于单页面复用的问题，新手搞不懂

Question

这是页面的样式，左边导航栏是一个组件，右侧是页面：

左侧有好几个子菜单点击产生的页面都是这个页面，但是渲染的数据不同，怎么区分复用，渲染不同的数据
这是左侧导航栏的数据：
。
要跳转的页面给有href地址，这是组件DOM结构：

该怎么区分渲染呢？
接口也不一样：

Answer 1

把变化的参数从url里面传进去，列表页取url里面的参数来判断要请求哪个接口

另外你这个template这样写也太累了，可以换成我这种方法，我这个项目也没有用webpack，直接引入cdn的vue

Answer 2

这是内同列表:

这是新增，编辑的dom：

这是获取数据的接口。是公司内部自己封装好的：

下面是增删改查，里面也有接口：

这就是页面里的内容

Answer 3

这个问题需要你自己思考和突破，别人不太能帮上忙。

抽象是程序的核心。这里需要从侧边栏的布局和功能抽象出逻辑和数据，其实并不复杂，算是一个不高的门槛，翻过去后面可以顺畅的地走很远。这个过程不太好用语言描述，有点类似游泳时候把头埋到水里一样，得自己尝试一下。

建议先写，随便找一个功能数据，先抽象出侧边栏，然后逐个去兼容其他功能，直到你的可复用侧边栏完成。然后回头重构，去掉不良设计。这样完成后，再面对类似的问题，你应该就不怕了。

Answer 4

在路由跳转的时候携带参数

let query = {
    type: '页面1',
    pjtid: '查询的id'
}
this.$router.push({
          name: 's_cam_info',
          params: null,
          query: query
        })

// 复用页面中这样写

watch: {
  
  $route(){
  
  this.pjtid = this.$route.query.pjtid
    this.type = this.$route.query.type
  
  },
  
  pjtid() {
  // 这个方法自行定义 去判断type的直接查询不同的接口
  this.pjtdetail()
  
  },
  
  }

------------------------
// 或者使用vuex

let params = {parent: '菜单1'}
 // vuex中设置参数
this.$store.commit('changePage', params)

 

// 然后在要复用的组件中监听参数的变化

watch: {
      '$store.state.app.changePage': {
        deep: true,
        handler(isFullscreen) {
          //你需要执行的代码
            // 这个可以得到 dataConfig 改变后的值 也就是父组件传过来的值
        // 然后根据这个值 去判断 去重新查询数据
        // TODO 
        // this.getData(newVal)
        }
      }

---

或者参考以下思路
// 下面是你要复用的组件可以使用props实现

 // 在你复用的组件中添加  props 主页 props 和data 同级

  props: {
    dataConfig: String,
        
  },
// 在写一个监听
 
  watch: {
    dataConfig: {
      deep: true,
      handler: function handler (newVal, n) {
        // 这个可以得到 dataConfig 改变后的值 也就是父组件传过来的值
        // 然后根据这个值 去判断 去重新查询数据
        // TODO 
        // this.getData(newVal)
      }
    },

在父组件中
//动态改变组件值就可以了
`
<data-v :dataConfig="这个地方写要传的值"/>
`