Vue多个路由共用同一组件时,互相切换时更新组件
1、vue在第二次跳转同一路由跳转数据不更新，使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略，并不会刷新当前路由组件。即mounted，beforeDestory等钩子函数并不会触发。
2、响应路由参数的变化，有三个菜单只有参数不同，但使用的同一个组件页面，配置路由时指向了不同三个路由。但切换菜单时，页面不刷新，导致路由多个子路由页面加载多次。
3、在 Vue3 中，使用 `watch` API，当 `props` 数据发生改变时可以执行回调来触发当前组件的刷新。
4、使用tab切换调用组件，若是多个组件，自然没啥问题，但是若是重复调用同一个组件，则会出现数据冲突的问题，所以在这里我使用component/来进行组件的调用。
5、我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。
6、接下来，我们就开始配置路由了。首先说几个准备思路吧。第一：页面打开后是要有默认显示页的（默认的路由），第二，同时实现路由切换时像JStab切换效果。接下来，我们要在app.vue里写好2个导航命名为router1和router2。
Vue组件化开发(三)——slot插槽的使用
父组件 这种情况是如果要父组件在子组件中插入内容 ，必须要在子组件中声明slot 标签 ，如果子组件模板不包含slot插口，父组件的内容{{msg}}将会被丢弃。
在子组件中写插槽标签slot给slot添加name属性。
具名插槽可以在一个组件中出现N次，出现在不同的位置。下面的例子，就是一个有两个具名插槽和单个插槽的组件，这三个插槽被父组件用同一套css样式显示了出来，不同的是内容上略有区别。
在组件使用时，通过slot-scope=“scope”，接收组件中slot标签上绑定的数据。
vue中同一个页面多次使用同一个组件的相互干扰问题
1、Vue解析组件模板后，在绑定更新v-on指令时会为DOM元素绑定事件(当然如果元素为iframe，会等到iframe加载完成后再为其绑定事件)。
2、在Vue中切换路径时，如果下一个路由与当前页面共用同一个组件，Vue会复用当前组件，不会重新创建一个。这就导致组件的生命周期函数如mounted， created等不会被触发，页面看起来就像什么都没发生一样。
3、还有种更新数组方法就是深拷贝了。通过 JSON.parse(JSON.stringify(list)) 来解决。深拷贝后，两个对象，包括其内部的元素互不干扰。
4、你是不是认为，“引用”会导致代码出现两次？C组件是一段代码，它通过export暴露出它的可用部分，你所有代码对c组件的引用都是调用C组件的功能而已，C组件在最后打包的代码中只存在在一处，所有对c的调用都会在那里运行。
vue路由改变了数据和内容不变的解决办法
1、解决：通过反复测试，后面发现有一条不显眼的警告消息： [vue-router] Non-nested routes must include a leading slash character. Fix the following routes：... 大概意思是 非嵌套路由必须包含一个前导斜杠字符。
2、解决方法：可以使用 Vue.set(object， key， value) 方法将响应属性添加到嵌套的对象上：也可以使用 this.$forceUpdate() 方法，可以局部更新 迫使Vue实例重新渲染。
3、在父组件中的数据发生变化时，传给子组件，子组件未发生变化。解决方法：看子组件是否能监听到子组件的变化，然后mounted赋值给子组件的绑定的变量中。如果有什么问题希望大家多交流。
4、使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略，并不会刷新当前路由组件。即mounted，beforeDestory等钩子函数并不会触发。vue 同一路由跳转不走生命周期，导致数据不更新。使用watch 监听路由变化。
5、当通过URL方式跳转到其他页面时，Vue会重新加载整个页面并初始化数据，这可能导致之前已经加载的数据被清空。为了避免这种问题，可以考虑使用Vue Router提供的路由导航守卫（Navigation Guards）来管理路由跳转。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
