router-view

Posted 2023-04-16

参考技术A <router-view>在组件中放的位置，就是当前组件路由的子组件内容的输出位置，
比如组件a中使用了router-view，组件a对应路由为“/a”,子路由为":id",对应子组件为aa,当组件a内部要进行路由跳转"/a/:id",那么组件aa的内容显示的位置为router-view标签的位置；

当组件a内部要进行路由跳转“/b”,那么此时b组件对应内容的输出位置就不再是router-view标签的位置，而是新开页面

vue刷新当前路由 router-view中的内容

通过改变router-view中的key来达到刷新组件的目的。

<span class="refresh" title="刷新" @click="refresh">
    <i class="iconfont">?</i>
</span>

<router-view :key="activeDate" />

界面上有个刷新按钮，点击刷新的时候，执行函数，改变activeDate的值，为当前的时间戳。这样就会刷新router-view中的内容。

data() {
    return {
      activeDate: 1
    }
},
methods: {
    refresh() {
      this.activeDate = new Date().getTime()
    }
}