vue3路由跳转页面刷新

在Vue3中，可以使用<router-view>组件来渲染路由对应的组件，并且在路由跳转时自动刷新页面。如果需要手动刷新页面，可以使用<router-link>组件或router.push()方法进行路由跳转。具体实现方法如下：

在路由配置文件中，设置路由对应的组件。

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]

const router = createRouter({
history: createWebHistory(),
routes
})

export default router
登录后复制

在组件中使用<router-link>组件或router.push()方法进行路由跳转。

<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<button @click="goHome">Go Home</button>
<button @click="goAbout">Go About</button>
</div>
</template>

<script>
export default {
methods: {
goHome() {
this.$router.push('/')
},
goAbout() {
this.$router.push('/about')
}
}
}
</script>
登录后复制

如果需要在路由跳转时手动刷新页面，可以在路由跳转前先跳转到一个空白页，然后在空白页的beforeRouteEnter钩子中再跳转回原来的页面，从而达到刷新页面的效果。

// 在需要刷新页面的组件中
this.$router.push('/emptyPage')

// 在空白页的组件中
<template>
<div></div>
</template>

<script>
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
}
</script>
登录后复制