路由跳转同一个界面，但是params不同。页面不刷新？(路由的key)

引入知识点：路由的key值

• 如果不设置路由的key值，默认情况下是根据路径判断的，就是不包括params值

• 例子：
  Home组件内容（父）

<template>
  <div>
    <button @click="goRoute">路由跳转</button>
    <div>父组件的index:{{index}}</div>
    <router-view></router-view>
    <div>上面表示：页面只执行了一次mounted，并没有刷新,但是我们传递的路径确实不同</div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            index:0
        }
    },
    methods: {
        goRoute(){
            this.$router.push(`/child1/${this.index++}`)
        }
    },
}
</script>

• Child组件内容（子）

<template>
  <div>
    子组件的index:{{index}}
    <br/>
    子组件的params:{{this.$route.params.msg}}
    <br/>
  </div>
</template>
<script>
export default {
    data() {
        return {
            index:9999
        }
    },
    mounted(){
        console.log(this.$route);
        this.index = this.$route.params.msg
    }
}
</script>

• router内容

export default createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/child1/:msg',
            component:Child1
        }
    ]
})

思路：

1. 倘若我们点击跳转按钮

那么父组件中的index++，并且跳转路由到子组件
并且会把index作为params参数传入

2. 在进入子组件，mounted函数中会赋值params的值给子组件的index
3. 当我们多次点击路由跳转按钮，

• 那么父组件index会增加，
• 子组件的params会增加，
• 子组件的index没有变化

结论：

• 因为在路由跳转的时候，值改变了params参数，路径是没有改变的，所以vuerouter在识别的时候，会当做你没有进行跳转，所以mounted只执行了一次

解决方法：

• 在父组件中把router-view加上key
• 原本：<router-view ></router-view>
• 变为：<router-view :key="this.$route.params"></router-view>

效果：

• 在每次点击跳转按钮的时候，由于传入的params参数在发生变化，那么每次路由会认为是进入了新的界面，就会重新加载

应用场景:

• 可以有的不同的解决方案：通过watch，监听params值是否改变