网络日志

vue 多个路由使用同一个组件页面

在项目中, 会有多个路由共用一个页面组件, 比如新增&编辑页面, 基本一样,只是数据结构不同而已, 这时新建路由和编辑路由,就可以使用同一个页面组件

但,存在一个问题,就是切换路由时, 路由变化了, 不会重新触发页面组件的钩子函数(只在第一次加载时调钩子函数)。这个问题是页面钩子生命周期相关, 为了解决能重新获取数据,重新加载页面。

总结了以下解决方案

方法一: 给router-view 里添加 key 唯一控制

//在父组件加载路由的地方,增加key
<router-view :key="$route.fullPath"></router-view>

方法二: 通过监听 $route 路由的方法

//在共用的页面组件中增加路由监听事件
 watch:{
      '$route': function(to, from){
        if(to==="/create"){
          // 处理该路由下的数据
        }
        else if(to==="/update"){
          // 处理该路由下的数据
        }
      },
    },

方法三: 通过增加一个中间页面 empty.vue 处理跳转

methods: {

    init(){
      
      // update 和create 路由都指向同一个组件
      let id = this.$route.query.id 
      if(id){
        //编辑
        this.$router.replace({path:"/update", query:{id, id}})
      }
      else{
        //新增
        this.$router.replace({path:"/create"})
      }
     
    },
}