vue多页应用跳转页面
时间: 2023-07-26 18:27:45 浏览: 60
如果你想在Vue多页应用中进行页面跳转,可以使用Vue Router。首先,你需要在项目中安装Vue Router:
```
npm install vue-router --save
```
然后,在你的main.js文件中,导入Vue Router并使用它:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import HomePage from './components/HomePage.vue'
import AboutPage from './components/AboutPage.vue'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: HomePage },
{ path: '/about', component: AboutPage },
]
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
```
在上面的代码中,我们创建了两个组件:HomePage和AboutPage,并且使用Vue Router来定义了这两个组件的路由。我们使用Vue.use()来注册Vue Router插件,并且在Vue实例中添加了router选项。
现在,你可以在你的应用程序中使用Vue Router来进行页面跳转了。例如,如果你想从HomePage跳转到AboutPage,你可以在HomePage组件中添加一个按钮,并使用Vue Router的router-link组件来进行跳转:
```html
<template>
<div>
<h1>Home Page</h1>
<router-link to="/about">Go to About Page</router-link>
</div>
</template>
```
当用户点击这个按钮时,Vue Router会自动导航到AboutPage组件。同样的,你也可以在AboutPage组件中添加一个按钮来返回到HomePage组件:
```html
<template>
<div>
<h1>About Page</h1>
<router-link to="/">Go to Home Page</router-link>
</div>
</template>
```
当用户点击这个按钮时,Vue Router会自动导航回HomePage组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)