好的，下面是一个简单的示例，演示如何使用
Vue制作两个来回
转跳的网页。
首先，您需要创建两个
Vue组件，一个用于第一个页面，另一个用于第二个页面。以下是一个简单的示例：
```html
<!-- 第一个页面 -->
<template>
<div>
<h1>欢迎来到第一页</h1>
<
button @click="goToPage2">到第二页</
button>
</div>
</template>
<script>
export default {
methods: {
goToPage2() {
this.$router.push('/page2');
}
}
}
</script>
```
```html
<!-- 第二个页面 -->
<template>
<div>
<h1>欢迎来到第二页</h1>
<
button @click="goToPage1">回到第一页</
button>
</div>
</template>
<script>
export default {
methods: {
goToPage1() {
this.$router.push('/');
}
}
}
</script>
```
在这两个组件中，我们分别定义了一个
按钮，用于在两个页面之间
进行转跳。在第一个页面的
按钮中，我们使用`this.$router.push('/page2')`命令将路由切换到第二个页面。在第二个页面的
按钮中，我们使用`this.$router.push('/')`命令将路由切换回第一个页面。
接下来，您需要在
Vue的路由器中定义这两个页面的路由。以下是一个简单的示例：
```javascript
import
Vue from '
vue'
import Router from '
vue-router'
import Page1 from '@/components/Page1'
import Page2 from '@/components/Page2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Page1',
component: Page1
},
{
path: '/page2',
name: 'Page2',
component: Page2
}
]
})
```
在这里，我们使用
Vue路由器定义了两个路由，一个对应第一个页面，另一个对应第二个页面。要访问第一个页面，我们访问`/`路径；要访问第二个页面，我们访问`/page2`路径。
最后，您需要在
Vue应用程序中引入路由器，并将其传递给
Vue实例。以下是一个简单的示例：
```javascript
import
Vue from '
vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new
Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
```
在这里，我们在
Vue实例中引入了路由器，并将其传递给
Vue实例的`router`选项。现在，您应该可以在浏览器中访问您的
Vue应用程序，并在两个页面之间
进行来回
转跳了。
最低0.47元/天 解锁文章
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
