业务需求，多页面业务场景共用同一个模板，换不同路由地址请求，在同一个页面模板上返回不同数据。

[index.js]

设置多个路由指向同一页面，注意path和name必须具有唯一性

  {
    path: '/column',
    name: 'column',
    component: () => import('../components/partycolumn/ColumnPage')
  },
  {
    path: '/column1',
    name: 'column1',
    component: () => import('../components/partycolumn/ColumnPage')
  },
  {
    path: '/column2',
    name: 'column2',
    component: () => import('../components/partycolumn/ColumnPage')
  }

[ColumnPage.vue]

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    name: 'ColumnPage',
    data () {
      return {
        title: ''
      }
    },
    methods: {
      resetData () {
        // 根据不同路由地址，返回不同数据
        if (this.$route.fullPath === '/column') {
          document.title = '专栏' // 修改网页title
          this.title = '专栏' // 返回业务数据
        } else if (this.$route.fullPath === '/column1') {
          document.title = '专栏1'
          this.title = '专栏1'
        } else if (this.$route.fullPath === '/column2') {
          document.title = '专栏2'
          this.title = '专栏2'
        }
      }
    },
    created () {
      this.resetData()
    },
    watch: {
      $route: {
        handler: 'resetData'
      }
    }
  }
</script>

<style scoped>

</style>

 

参考

https://blog.csdn.net/qq_36545813/article/details/108241978

---

【问题记录】

给 [ColumnPage.vue] 添加了子页面 [SectionPage.vue]

<router-view/>

路由结构如下

 { // - column1 - 
    path: '/party/column1',
    name: 'Column1',
    component: () => import('../components/column/ColumnPage'),
    redirect: '/party/column1/section',
    children: [
      {
        path: 'section',
        name: 'Column1',
        component: () => import('../components/column/SectionPage')
      }
    ]
  },
  { // - column2 - 
    path: '/party/column2',
    name: 'Column2',
    component: () => import('../components/column/ColumnPage'),
    redirect: '/party/column2/section',
    children: [
      {
        path: 'section',
        name: 'Column2',
        component: () => import('../components/column/SectionPage')
      }
    ]
  },
  { // - column3 - 
    path: '/party/column3',
    name: 'Column3',
    component: () => import('../components/column/ColumnPage'),
    redirect: '/party/column3/section',
    children: [
      {
        path: 'section',
        name: 'Column3',
        component: () => import('../components/column/SectionPage')
      }
    ]
  }

需要注意的是：

（1）父组件和子组件的name属性必须保持一致，不然父组件渲染会出问题，因为父组件是根据name属性进行渲染的

（2）children的 path: 'section' 等价于 path: 'party/column1/section'

 

[SectionPage.vue]

column_name 在 [ColumnPage.vue] 页面中根据路由判断渲染数据时添加保存的

<template>
  <h1>{{ section }}</h1>
</template>

<script>
  export default {
    name: 'SectionPage',
    data () {
      return {
        section: ''
      }
    },
    methods: {},
    created () {
      this.section = window.sessionStorage.getItem('column_name')
    }
  }
</script>

<style scoped>

</style>

运行发现当切换路由时，[ColumnPage.vue]的内容切换了，但是[SectionPage.vue] 的内容没有修改，当重新刷新页面，值取到了。

说明在进行路由切换的时候 [SectionPage.vue] 中的created并没有执行，当重新刷新页面之后，才执行created

原因：vue的生命周期，官方文档说明如下

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

 

【解决方案】

#1 -> 给<router-view>添加key值，保证每一次组件渲染都有不同的ID值，这样保证created每次都会执行，注意key必须具有唯一性。

<router-view :key="this.$route.fullPath"/>

#2 -> [SectionPage.vue] 添加watch监听路由变化，也是官方给出的推荐解决方案

 watch: {
      $route (to, from) {
        // 对路由变化作出响应...
        this.section = window.sessionStorage.getItem('column_name')
      }
 }

#3 -> keep-alive + activiated 实现

参考

https://blog.csdn.net/muyun666/article/details/108751912

https://blog.csdn.net/qq_41485414/article/details/113698404

https://segmentfault.com/a/1190000020173042

https://vvbug.blog.csdn.net/article/details/110428395