Vue中使用watch监听路由解决组键复用导致router-view不刷新的问题

首页 | 内容 | Vue中使用watch监听路由解决组键复用导致router-view不刷新的问题

在使用Vue-router做项目时,会遇到如/serviceId/:id 或者/post?id这样只改变路由id号吊用子组键的场景,由于router-view是复用的,单纯的改变id号并不会刷新router-view,也就不会调用对应id的子组键,那么怎样实现这一需求呢?

1、使用watch方法

   watch除了可以监听数据的变化,路由的变化也能被其监听到,所以当id发生变化时,'$route'也会相应地发生变化,因此可以通过watch的方法来进行操作。

//监听路由变化
watch:{
    $route( to , from ){
       // to , from 分别表示从哪跳转到哪,都是一个对象
       console.log( to , from )
       // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
     }
}

实现点击左侧菜单,调用右侧子组键对应ID的内容例子:

<template>
  <div>
    <!--路由-->
    <ul>
        <li v-for="(item,aid) in items" :key="aid" >
            <router-link :to="'/Content/List/'+aid">第{{aid}}个---{{item}}</router-link>
        </li>
    </ul>
    <!--子组键视口 需要提前配置路由调用-->
    <div class="grid-content bg-purple ListRight">
        <router-view v-if="isRouterAlive"></router-view>
    </div>
   </div>
</template>

<script>
export default {
    data () {
        return {
            items:['11111111','222222222','33333333333'],
            isRouterAlive: true
        }
    },
    methods:{
        //路由变化重新加载子组键
        reload(){
            this.isRouterAlive = false
            this.$nextTick(() => (this.isRouterAlive = true))
        }
    },
    //监听路由变化,变化执行reload函数
    watch:{
    "$route":"reload"
    }
}
</script>

2.通过导航守卫解决router-view不刷新的问题

官方文档:beforeRouteLeave

beforeRouteLeave (to, from, next) { 
   // 导航离开该组件的对应路由时调用    
   // 可以访问组件实例 `this`
}


TAGS:原创标签日常分享
留言板