vue主页面切换不同子页面
时间: 2023-08-10 11:03:49 浏览: 113
在Vue项目中,可以通过使用Vue Router库来实现主页面切换不同子页面的功能。Vue Router是Vue.js官方的路由管理器,可以将不同的页面组件映射到不同的URL地址,从而实现页面间的切换。
首先需要在项目中安装Vue Router:
```
npm install vue-router --save
```
然后在main.js中引入Vue Router并配置路由:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
const router = new VueRouter({
routes
})
new Vue({
router,
template: `
<div id="app">
<h1>My App</h1>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
<router-view></router-view>
</div>
`
}).$mount('#app')
```
在上面的代码中,我们定义了三个路由:`/`、`/about`和`/contact`,分别映射到三个组件:Home、About和Contact。在Vue实例的模板中,我们使用`<router-link>`标签来实现页面之间的切换,使用`<router-view>`标签来显示当前路由的组件。
接下来,我们需要在组件中使用路由:
```
<template>
<div>
<h2>About</h2>
<p>This is the about page.</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
```
在组件中,可以通过`this.$router.push()`方法来实现编程式导航:
```
this.$router.push('/contact')
```
这样就可以实现Vue主页面切换不同子页面的功能了。