实现vue跳转后当前画面被替换为新画面
时间: 2024-05-04 09:21:00 浏览: 15
在 Vue 中,可以使用 Vue Router 来实现路由跳转并替换当前页面为新页面。下面是一个简单的示例:
1. 安装 Vue Router:
```
npm install vue-router
```
2. 在 main.js 中引入并使用 Vue Router:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})
new Vue({
render: h => h(App),
router
}).$mount('#app')
```
3. 在 App.vue 中添加路由出口:
```html
<template>
<div>
<router-view></router-view>
</div>
</template>
```
4. 在组件中使用 router-link 来跳转页面:
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
这样就可以实现路由跳转并替换当前页面为新页面了。当你点击一个 router-link 时,Vue Router 会加载对应的组件并替换当前页面为新页面。
阅读全文