在
Vue3中，可以使用`<router-view>`组件来渲染
路由对应的组件，并且在
路由跳转时自动
刷新页面。如果需要手动
刷新页面，可以使用`<router-link>`组件或`router.push()`方法进行
路由跳转。具体实现方法如下：
1. 在
路由配置文件中，设置
路由对应的组件。
```javascript
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
```
2. 在组件中使用`<router-link>`组件或`router.push()`方法进行
路由跳转。
```html
<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>
```
3. 如果需要在
路由跳转时手动
刷新页面，可以在
路由跳转前先
跳转到一个空白页，然后在空白页的`beforeRouteEnter`钩子中再
跳转回原来的
页面，从而达到
刷新页面的效果。
```javascript
// 在需要
刷新页面的组件中
this.$router.push('/emptyPage')
// 在空白页的组件中
<template>
<div></div>
</template>
<script>
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
}
</script>
```
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
