vue两个页面来回跳转路由
时间: 2023-10-08 09:06:11 浏览: 140
在Vue中,可以通过Vue Router来实现页面之间的跳转路由。下面是一个简单的示例:
首先,确保你已经安装了Vue Router。如果还没有安装,可以通过以下命令进行安装:
```
npm install vue-router
```
接下来,在你的Vue项目中创建一个新的router文件,例如`router.js`,然后在这个文件中定义路由:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入需要跳转的页面组件
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/page1',
component: Page1
},
{
path: '/page2',
component: Page2
}
]
const router = new VueRouter({
routes
})
export default router
```
在上面的代码中,我们导入了需要跳转的页面组件,并将其与对应的路由路径进行关联。
接下来,在你的Vue实例中使用路由:
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
在上面的代码中,我们将之前定义的路由对象注册到Vue实例中。
然后,在你的组件中使用`<router-link>`和`<router-view>`来进行页面跳转和显示:
```html
<template>
<div>
<router-link to="/page1">跳转到Page1</router-link>
<router-link to="/page2">跳转到Page2</router-link>
<router-view></router-view>
</div>
</template>
```
上面的代码中,`<router-link>`用于生成页面跳转的链接,`<router-view>`用于显示对应的组件。
这样,你就可以通过点击链接来在页面之间进行来回跳转了。
阅读全文